Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #815104

    Hello Kriesi,

    Thanks for the great support and theme. I’ve been looking through several closed tickets regarding changing the caption on images however most are for changing the caption position of the slider. I have a full width slider on the top of the page and then within the page, I am trying to have images with the caption a specific heading (h2) so that the font is the same as the slider font. Unfortunately the default caption font on images is different than the font on Sliders.
    How can I have the caption on an image the same font style as my headings but also a specific size (18px) just for these image captions? I would also want the captions centered and towards the bottom of the image.

    ***Image with sample of end result below.

    Thank you!


    Hey tlchase,

    They are using the same font, Bitter, though the captions are a lot smaller. What element did you use for the images? It looks like it’s not from the Layout Builder? If you wrote that yourself then you could add a class to the the text tag, like my-class, then you can target it with CSS like this:

    .my-class {

    Best regards,


    I am using the regular image Enfold Media Element. Please see below regarding specific image and caption placement from sample page and actual page we are creating.




    Please try the following in Quick CSS under Enfold->General Styling:

    .av-image-caption-overlay-center {
        padding: 0 !important;
        vertical-align: bottom !important;
        color:black !important;
        font-family: 'bitter' !important;

    Best regards,


    Thank you Rikard,
    how can I achieve the darker background caption only for the image caption though? The caption is bottom and centered but the caption background only should be a darker overlay opacity of color #081e3f (per image below)

    Thank you!



    Try this:

    #top .av-image-caption-overlay-center p {
        background: rgba(8, 30, 63, 0.5) !important;

    Best regards,


    Thank you Rikard, you rock! Really appreciate that…one last thing with this: is there any way to have the text change color (to #f7c225) when you hover over the image?

    Thanks again for your help!



    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .av-image-caption-overlay-center:hover p {
        color: #f7c225;

    Best regards,


    Hi Yigit! That worked like a charm..thank you both for your help and support!!


    We’re glad to help! Do let us know here in the forums if you have any other questions or issues.

    We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

    Thank you so much!


Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Image Caption change font to heading style’ is closed to new replies.