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

Home Forums CSS Fade in Captions showing hover state below on mouse out

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #191697

    I modified Chris’s Slide in Captions to use fade instead of slide transition. However I am having a problem when the mouse moves off one image to another, the caption is showing briefly below the image. This is very visible on the home page of in the last 2 images of the 3rd row of Research Scholars. This is pure CSS, what am I missing???
    Any help is greatly appreciated?

    Chris Coyier

    Seems OK to me at the moment. Did you figure it out?

    There is some layout stuff in there that I probably would have approached differently. For instance, each of those figure.cap-bot is 208px wide, but that’s never explicitly set as best I can tell. They are just that wide because they are floated to the left and the image inside them happens to be 208px wide naturally. That might cause weird layout stuff as the images load in. I’d probably just be explicit with the width there (like you are with the height).

    Then when you absolutely position that figcaption inside it, you can set both width and height to be 100% so it sizes with the whole area as needed. No need to maintain those sizes in two places.

    And just as a small design critique, I’d probably speed up those transitions a bit. Feels a little slow to reveal text I might actually want to read. And the red link text is a bit hard to read on the darkened photos.


    Thank you for your reply Chris, I really appreciate that you took the time to respond.

    I had figured it out by adding in the heights and widths but I will apply your suggestions. I do know that the hyperlink is hard to read at the moment. My immediate problem was to get the thing to work correctly, not being a css or WP genius like you. Changing colors on hyperlinks is not as difficult as the other stuff

    Thank you for your help.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.