-
Posts
-
Hello Enfold-Team,
I would like to place a big caption (name of each team member) at the bottom of each image (portrait) in the horizontal gallery. I have searched in the forum and placed some code in PHP file:function horizontal_gallery_subline(){
?>
<script>
(function($){
$(window).load(function() {
$(‘.av-horizontal-gallery-link’).css(‘bottom’, ’30px’);
$(‘.av-horizontal-gallery-link’).each(function(){
var imgTitle = $(this).attr(‘title’);
$(this).after(‘<div style=”width:580px;”><p class=”text-under-image”>’ + imgTitle + ‘</p></div>’);
$(this).css({
‘padding-bottom’ : ’20px’,
‘background-color’ : ‘transparent’,
});
$(‘.text-under-image’).css({
“text-align”: “center”,
“margin”: “-100px 0”,
“color”: “#FFF”,
“background” : “transparent”,
});
});
});
})(jQuery);
</script>
<?php
}
add_action(‘wp_footer’, ‘horizontal_gallery_subline’);The code fulfilled part of my wishes. However, I would like the enlarge the font size of the captions and place a transparent black rectangle as a background of the text. And I would like this effect to be responsive.
Here attached my targeted visual and login info.
Thank you very much!!Hi,
Thanks for contacting us and sorry for the late reply!
I added following code to bottom of Quick CSS field and commented a few lines in your code in functions.php file
.custom-subline { position: absolute; bottom: 0; height: 85px; width: 100% !important; text-align: center; color: white; background-color: rgba(0,0,0,0.4); } .custom-subline p { font-size: 25px !important; text-transform: uppercase; } @media only screen and (max-width: 480px){ .custom-subline{ bottom: 45px; }}Please review your website :)
Best regards,
Yigit
- The topic ‘Placing a big caption on each image in the horizontal gallery’ is closed to new replies.