Change Content When Hovering Over a Grid Cell

Hi,
On your /test-codeblock/ page, I first un-commented your functions.php code to load the imagehover.min.css so it would load,

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/css/imagehover.min.css',
        array('parent-style')
    );
}

it is better than the “code block” css you added, I also removed that.
I also adjusted your image code to show the image:

<figure class="imghvr-fade">
    <img src="https://your-domain.com/wp-content/uploads/2020/04/coverage-540x300-1-300x167.jpg">
    <figcaption>
        This is the hover content that I have added
    </figcaption>
    <a href="https://your-domain.com/wp-content/uploads/2020/04/coverage-540x300-1-300x167.jpg"></a></figure>

The issue was that your img src was empty, now it contains the link to your image and the hover works.

On the same page, your icon grid was inside of a color section which restricted it’s width, I moved it out of the color section and now they are square.

Best regards,
Mike

Hi,
To have your icon grids to have the same height as width, Try adding this code to the end of your functions.php file in Appearance > Editor:

function equal_height_icon_grid(){
  ?>
  <script>
(function($){
$(document).ready(function() {
	$(window).on('resize', function() {
        $('.article-icon-entry').height( $('.article-icon-entry').width() );
	}).trigger('resize');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'equal_height_icon_grid');

Then clear your browser cache and check.

Best regards,
Mike

Hi,
a) you can use media queries to size the fonts, like this:

@media only screen and (max-width: 375px) { 
#main a > h3.av_icongrid_title.icongrid_title {
	    font-size: 36px !important;
}  
}

b) please see this screenshot that shows adding the link to the advanced tab, then the whole cell is a link.

Best regards,
Mike

Hi s29ers,

Great, I’m glad that Mike could help you out.

Best regards,
Rikard