Grow your CSS skills. Land your dream job.

Overlay image on hover?

  • # December 20, 2012 at 7:14 am

    Relatively an easy one i think, but i can’t figure it out.

    I’m trying to get an image to lay over another image on hover, like the image is a thumbnail, when its hovered over, i want it to change to my other image that says ‘read more’

    Currently i have

    #postthumb #overlay {
    opacity: 0;
    background: url(../images/overlay.png) scroll;
    position: absolute;
    }

    #postthumb a:hover #overlay {
    transition: opacity 150ms ease-in-out 0s;
    position: absolute;
    opacity: 1;
    background: url(../images/overlay.png) scroll;
    }

    Any ideas?

    # December 20, 2012 at 7:16 am

    http://codepen.io/joe/pen/kmwoK

    # December 20, 2012 at 7:26 am

    @danieldatton – You’ll need to make your image absolute, ../images/ doesn’t mean anything to codepen

    # December 20, 2012 at 7:47 am

    Cheers andy, i updated the pen, and the images are absolute.

    http://codepen.io/danieldatton/pen/rkEil

    # December 20, 2012 at 7:51 am

    Okay, i managed to get it so that when you hover over the #overlay, it is working and showing the background image, but its not over the top of the post image.

    :/

    # December 20, 2012 at 8:03 am

    http://codepen.io/danieldatton/pen/rkEil

    Got it, just alignment issues now, but ill sort that on my end.

    # December 20, 2012 at 8:22 am

    Edited it for you =)

    http://codepen.io/Watson90/pen/LxfnJ

    # December 20, 2012 at 8:44 am

    @Waton90 your a star mate, cheers.

    I need a little help with aligning columns on the site if you have time, i have paypal.

    floats just arnt working, as usual.

    # December 20, 2012 at 8:50 am

    Could be a problem with not clearing them, or if you’re adding padding it could be too large for its parent.

    Post a link if you can (if it’s live), I could take a look for you…

    # December 20, 2012 at 8:59 am

    @Watson90 http://j.mp/Yp02T2 is the coding so far, and http://j.mp/ZTMvU2 is the design.

    You can see at the bottom of the code where the community news column is, the content is wrapped in #content, and the community feed is wrapped in #communityfeed, but #communityfeed just wont go side by side with #content, and then i need to have a sidebar div to float beside the community news..

    I do have clear divs in there, i’m pulling my hair out, yet im sure its something simple.

    # December 20, 2012 at 9:44 am

    @danieldatton – maybe something like this may be useful to you, obviously you would adjust it to fit your needs: http://codepen.io/Watson90/full/cnHwI

    # December 20, 2012 at 9:52 am

    You’re clearing everything… If you want to float elements next to one another – you can’t first clear the previous float. Remove the clear: both; statements from #content and #communityfeed. Then I want you to remove the extraneous clearing divs after each of those elements and promise never to use them again – there is no reason.

    You also can’t use an id more than once per page – change them classes.

    You also need to float the #content left

    # December 20, 2012 at 11:02 am

    I was having a play around with @Watson90 ‘s solution to the image on hover and thought it may be of value. In [my version](http://codepen.io/David_Leitch/pen/nxvrj “http://codepen.io/David_Leitch/pen/nxvrj”), you don’t need to explicitly set the image/element height in the stylesheet, which may make it easier to reuse in other scenarios. The only issue is that you need to make sure the dimensions of the base image and hover image are the same. Alas, I couldn’t get the transition working, so I just took that code out.

    # December 20, 2012 at 11:05 am

    Ahh good going @David_Leitch =)

    # December 20, 2012 at 11:36 am

    @Watson90 massively helpful, its un-exlainable how helpful that is…

    @wolfcry911 cheers man, ill clear it all up, try it out, and yes i promise ;-)

    @David_Leitch thanks for that man, fixed it nicely.

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

You must be logged in to reply to this topic.

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