Custom Caption CSS Stopped Working

[Bekhi Spika]

Bekhi Spika

May 20, 2019 at 8:54 am

Hello,

I received the custom css code shown below from you that worked brilliantly until WordPress did an update. The code still appears in all the appropriate areas – Advanced Settings/Custom CSS – and also in – Header/Footer Scripts. But the custom captions don’t appear as we’d like. We’d like to move the site live tomorrow – but for now you can see it here and the fact that it just displays the default image captions:

*Login to see link

Provided from Ben:

Hey,
ok so this isn’t built in but you can add it, first in your theme options > advanced settings add this css:

/* billie’s comment = custom image caption overlay code */

.single-portfolio .kt-image-carousel .carousel-caption {
line-height: 24px;
position: absolute;
left: 0;
text-align:center;
right: 0;
background: rgba(255,255,255,0.6);
font-size: 18px;
bottom: 0;
padding: 20px;
padding: 14px 8px 14px 8px;
color: #333;
background: rgba(255,255,255,.6);
z-index: 1000;
opacity: 0;
-webkit-transition: all .6s ease-out;
transition: all .6s ease-out;
}
.single-portfolio .kt-image-carousel .gallery_item:hover .carousel-caption {
opacity: 1;
}
.single-portfolio .kt-image-carousel {
padding-bottom: 24px;
}

Then add this javascript in your theme options > header and footer scripts (if you don’t see this check the theme extensions settings to enable).

Place in the header scripts area:

<script type=”text/javascript”>
jQuery(document).ready(function ($) {
$(‘.single-portfolio .kt-image-carousel .gallery_item div’).each(function(){
var caption = $(this).find(‘img’).attr(‘data-caption’);
wrap = $(‘<div></div>’);
wrap.append(caption);
$(this).append(wrap);
});
});
</script>