Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overlay image on hover?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #41477
    danieldatton
    Member

    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?

    #118241
    danieldatton
    Member
    #118243
    Andy Howells
    Participant

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

    #118246
    danieldatton
    Member

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

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

    #118247
    danieldatton
    Member

    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.

    :/

    #118248
    danieldatton
    Member

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

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

    #118249
    Watson90
    Member
    #118255
    danieldatton
    Member

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

    #118258
    Watson90
    Member

    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…

    #118261
    danieldatton
    Member

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

    #118263
    Watson90
    Member

    @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

    #118264
    wolfcry911
    Participant

    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

    #118266
    David_Leitch
    Participant

    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/nxvrjhttp://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.

    #118267
    Watson90
    Member

    Ahh good going @David_Leitch =)

    #118271
    danieldatton
    Member

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.