Hover on column link

Hey Media-click,

Thank you for the inquiry.

You can try this script in the functions.php file to append a new overlay container to the columns with links, and set it to only display on hover.

// add overlay to columns
function ava_custom_script_mod_column_overlay()
{
?>
	<script>
		(function($) {
			$(".avia-link-column").append("<div class='avia-link-column-overlay'></div>");

			$(".avia-link-column").mouseenter(function() {
				$(this).find(".avia-link-column-overlay").stop().animate({
					opacity: 1,
				});
			}).mouseleave(function() {
				$(this).find(".avia-link-column-overlay").stop().animate({
					opacity: 0,
				});
			});
		})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_column_overlay', 10000);

You should also add this css code to adjust the style of the overlay.

.avia-link-column-overlay {
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
}

Best regards,
Ismael

Hi,
For each column you can add an ID or a class and create a rule for each, this example uses custom classes to add a green and red overlay to two columns:

.avia-link-column-overlay {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.red-overlay > .avia-link-column-overlay {
    background: rgba(255,0,0,0.5);
}
.green-overlay > .avia-link-column-overlay {
    background: rgba(0,255,0,0.5);
}

Please give this a try, if you have trouble please link to a test page.

Best regards,
Mike