Overlay image on hover?

[danieldatton]

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?

[danieldatton]

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

[Andy Howells]

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

[danieldatton]

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

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

[danieldatton]

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.

:/

[danieldatton]

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

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

[Watson90]

Edited it for you =)

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

[danieldatton]

@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.

[Watson90]

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…

[danieldatton]

@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.

[Watson90]

@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

[wolfcry911]

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

[David_Leitch]

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.

[Watson90]

Ahh good going @David_Leitch =)

[danieldatton]

@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.

[Author]

Posts