Image with Overlay Captions

  • Hello,

    Thank you for creating this plug-in. It works well so far but I do have one question: is it possible for the caption to show at the bottom of the image only when a mouse is hovered over it? I know this might need css code, but if anyone is willing to help I’d really appreciate it. Thank you!

    • This topic was modified 4 years, 4 months ago by rinnah.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author fesomia

    (@fesomia)

    As you said it can be done modifying your theme css; that’s outside the scope of this plugin, but you can try with something like this (may need modifications to work with your theme):

    figure.wp-caption.featured {position:relative;}

figure.wp-caption.featured figcaption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
}

figure.wp-caption.featured:hover figcaption {
    opacity: 1;
}
    Thread Starter rinnah

    (@rinnah)

    Thank you very much. However, I think the caption needs to be in a semi-transparent, full width black box otherwise (depending on the colour of the image) the font might blend in and become invisible. I’m not a coder at all but would something like this work:

    figure.wp-caption.featured: border
    background-color: rgb( xxx );

    Any advice is appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image with Overlay Captions’ is closed to new replies.