Grow your CSS skills. Land your dream job.

Transparent Hovering Image Help

  • # March 18, 2013 at 8:13 am

    Im a rookie to the css and html industry and im in need of some help so would be grateful if anyone could solve my problem.

    Im trying to make a transparent colour hover over my thumbnail photo in my portfolio section of the website but i cant seem to work it out, currently whats happening is i manage to get the opacity at 30% and it works but its showing the white background of my body behind the hover and not the thumbnail image

    Please if anyone could give me some advice i would appreciate it .

    Kind Regards

    # March 18, 2013 at 8:25 am

    You can do this with a psuedo element BUT you can’t apply those to an image.

    So, if you wrap the image in a block level element such as a div or figure, you can apply the pseudo element to that.

    Like this: http://codepen.io/anon/pen/uEnBm

    # March 18, 2013 at 8:32 am

    Thanks for the really quick reply Paulie, like i said I’m a rookie and what you’ve posted is exactly what i was looking for but im not sure i understand it 100% from what i can see you’ve applied a wrap around the image and added a hover on top of that? Will this allow the image to still be linkable?

    I like to learn things so want to understand how they work rather then just copying code but i will attempt to use what you sent on code pen and implement it onto my site

    Thank you very much

    Kind regards

    # March 18, 2013 at 8:40 am

    Oh….you want the image to be a link…that’s even better.

    No need for the div as the anchor can be used instead…

    http://codepen.io/anon/pen/fALbG

    I’ve added a couple of comments as well.

    # March 18, 2013 at 8:51 am

    I will try that now and see how i get along, for me its a bit different because im using wordpress and editing a template cos im a beginner :)

    http://www.hkinteriors.co.uk

    that’s the link to the website if ur interested

    Thanks again Paulie appreciate it

    # March 18, 2013 at 10:05 am

    Paulie in codepen the output is showing the box below the image not on top of it any idea why that’s happening?

    # March 18, 2013 at 10:10 am

    Cant get it to work :( i use wordpress and my page consists of the following

    < ?php do_atomic( 'open_content' ); ?>

    < ?php if ( have_posts() ) : ?>

    < ?php $counter = 1; ?>

    < ?php while ( have_posts() ) : the_post(); ?>

    < ?php do_atomic( 'before_entry' ); ?>

    < ?php if ( ( $counter % 4 ) == 0 ) { ?>

    ” class=”< ?php hybrid_entry_class(); ?>“>

    < ?php } ?>

    < ?php do_atomic( 'open_entry' ); ?>

    < ?php if ( current_theme_supports( 'get-the-image' ) ) {

    get_the_image( array( ‘meta_key’ => ‘Thumbnail’, ‘size’ => ‘archive-thumbnail’, ‘image_class’ => ‘featured’, ‘width’ => 220, ‘height’ => 150, ‘default_image’ => get_template_directory_uri() . ‘/images/archive_image_placeholder.png’ ) );

    } ?>

    < ?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>

    < ?php do_atomic( 'close_entry' ); ?>

    <

    < ?php do_atomic( 'after_entry' );?>

    < ?php $counter++; ?>

    < ?php endwhile; ?>

    < ?php else : ?>

    < ?php get_template_part( 'loop-error' ); ?>

    < ?php endif; ?>

    < ?php do_atomic( 'close_content' );?>

    < ?php get_template_part( 'loop-nav' ); ?>

    What i attempted to do is add a Wrap around this part shown in the example below

    < ?php if ( ( $counter % 4 ) == 0 ) { ?>

    # March 18, 2013 at 10:22 am

    >Paulie in codepen the output is showing the box below the image not on top of it any idea why that’s happening?

    Not in Chrome it isn’t unless I’m missing something.

    Can’t help you with WP but I thought you weren’t going down the ‘wrapper’ option.

    # March 18, 2013 at 10:32 am

    Ah a simple display: block; has fixed it for me in firefox when viewing it in codepen

    np paulie you’ve been a great help I’ve managed to get somewhere with it take a look

    [http://www.hkinteriors.co.uk](http://www.hkinteriors.co.uk “HKInteriors”)

    Now i need to try get it to work without the dark orange there but the writing still there

    # March 18, 2013 at 11:20 am

    Damn it cant work it out, wordpress makes it 2 hard 2 work with :( tried everything no luck

    thanks anyways Paulie

    # March 18, 2013 at 11:34 am

    Not entirely sure what it is you are trying to change on the current site.

    If you mean the text that appears when I hover over one of the 4 images/links then the background color can be found on line 775 of your CSS file so you could change that to whatever you want.

    Remember though, the text in that box is white so you can’t just remove it as the underlying color is white as well.

    The underlying color is found on line 757 of your stylesheet.

    PLEASE NOTE: Although changing these will fix THIS issue it might cause problems if the classes are used again.

    # March 18, 2013 at 12:49 pm

    Yeah its the 4 images with the colour on hover, i want it to bring up a transparent orange with the text on it when i hover over but whenever i set an opacity or add your pseudo code it doesn’t work, if i try to edit the code on line 775 with an opacity attribute it makes the transparency of the background not the picture if that makes sense

    and if i add your bit of code it just doesn’t do anything when i hover over

    It wont even let me remove the colored background, ive tried using Background: transparent; and background: none; as well as removing it all together but it still brings up a background

    # March 18, 2013 at 1:10 pm

    You can ignore all the previous stuff I said about pseudo elements etc. as I thought you were talking about something else not related to the front page.

    Line 775 has the background color….it’s set to orange at the moment. If you want it to be slightly transparent you **can’t** use opacity there are it will affect everything in the [a] link including the text.

    You will only have to change the background color to something like

    background: rgba(255,165,0,0.5)

    where the 0.5 number is the amount of opacity you want on that color.

    That’s the only thing you need to change.

    # March 19, 2013 at 7:12 pm

    Hi Paulie thanks for the reply, i added it to the line but whats happening is the same as previously explained it doesn’t make the colour transparent so that you can see the picture behind it but instead it shows the white background of the container/body behind the picture

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".