Styling Image Captions

  • I’d like some help with changing the styling of how image captions appear. I used to use the Jetpack Tiled Gallery (part of the WordPress Jetpack plugin) for images displaying in posts or on pages, and the captions were hidden, but appeared on mouseover as a semi-transparent overlay. But unfortunately that part of the Jetpack plugin appears not to work with Gutenberg, and the WordPress Classic Editor is no longer available – so my newer post have images with regular text captions underneath, and no overlay on hover.

    Here are some examples…

    An older post, in which the Jetpack caption overlays still work: https://www.manek.org.uk/2020/01/14/sharma-2000-modifications/

    And a newer post, with ‘plain’ image captions: https://www.manek.org.uk/2020/11/09/feeling-like-an-artist/

    I’d like to be able to replicate the hover overlay captions I used to get from the Jetpack plugin before WordPress broke it, and I am sure this should be possible to do with CSS – but I have tried styling the captions using both .wp-caption and figcaption in my custom CSS without being able to achieve the effect I want.

    I’m hoping you might have some advice on how to do this?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hey @manek43509 ,

    We appreciate you writing in,

    We checked your site and understand the problem that you are facing but the feature is provided by the Jetpack Tiled Gallery (Jetpack plugin). Could you please once try to contact the Jetpack Plugin support team and let them know the Plugin is not working with the Gutenberg editor? They might be able to help you.

    Regards,
    ThemeGrill Support Team

    Thread Starter Kit Marsden

    (@manek43509)

    There is a known issue between Jetpack Gallery and Gutenberg, yes. Lots of people have flagged this up, and there are loads of discussions on that topic out there from the past couple of years.

    However, that’s not what my query is about.

    It’s not an issue with Jetpack, since I’m not asking how to make Jetpack Gallery work with Gutenberg! I am just using Jetpack as an example; I want to know if I can recreate the same or similar image caption overlays within my theme using just CSS.

    Is this something which is possible to do? I don’t see why it shouldn’t be, but I can’t seem to pick up the right tags/classes for image captions.

    Hi @manek43509 ,

    Sorry to have misunderstood your query. Could you please try using the CSS code given below and check your site once?

    wp-block-image figcaption {
    background: #E8E8E8;
    color: #000;
    padding: 10px;
    position: absolute;
    bottom: -14px;
    width: 100%;
    opacity:0;
}
figure.aligncenter {
    position: relative;
}
figure.aligncenter:hover figcaption{
    opacity:1;
}

    Please write us back if this doesn’t help.

    Regards,
    ThemeGrill Support Team

    Thread Starter Kit Marsden

    (@manek43509)

    No, sorry but I’m afraid that hasn’t changed the style of the captions at all!

    Hi @manek43509 ,

    We apologize for the delay.

    Could you try using this CSS code below then? We believe this should work.

    .wp-block-image figcaption {
    background: #E8E8E8;
    color: #000;
    padding: 10px;
    position: absolute;
    bottom: -14px;
    width: 100%;
    opacity:0;
}
figure.aligncenter {
    position: relative;
}
figure.aligncenter:hover figcaption{
    opacity:1;
}

    Regards,
    ThemeGrill Support Team

    Thread Starter Kit Marsden

    (@manek43509)

    Brilliant! Thank you! I have got that all working exactly as I want it to now.

    Hi @manek43509 ,

    We are glad that we could help you. Please write us again if you encounter any problems in the future.

    Regards,
    ThemeGrill Suport Team

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