Image Caption underneath Image

Hi,

Thank you for the update. Use this code to adjust the default style of the caption.

.av-image-caption-overlay {
    position: relative;
    height: 60px;
    width: 100%;
    z-index: 10;
    text-align: left;
    -webkit-transition: none;
    transition: none;
}

.av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg {
    opacity: 1 !important;
    background: transparent !important;
    color: #000000 !important;
}

.av-image-caption-overlay-center {
    color: #000000 !important;
}

And then add this script in the functions.php file to move the caption underneath the image.

add_action('wp_footer', 'ava_custom_script_caption');
function ava_custom_script_caption(){
	?>
	<script>
		(function($) {
			$('.avia-image-container').each( function() {
				var caption = $(this).find('.av-image-caption-overlay');
				var image = $(this).find('.avia_image img');
				caption.insertAfter(image);
			});
		})(jQuery);
	</script>
	<?php
}

Best regards,
Ismael

Hi,

Thanks for the update. Yes, you can use the text block element. Add this css code if you want to modify the caption further.

.av-image-caption-overlay-center {
    display: table-cell;
    vertical-align: top;
    font-size: 1.3em;
    line-height: 1.5em;
    padding: 7px 0 0 0;
}

Best regards,
Ismael

Hi,

Thank you for the update. Use this one to adjust the hover state.

.avia-image-overlay-wrap a:hover {
    text-decoration: none;
}

Best regards,
Ismael