This solution enables you to show text when images are hovered using the Gutenberg block editor. In this case, unique text is added to each image in the grid and shown on image hover.
No 3rd party plugins are required.
Demo Video #
Shows images added to Gutenberg displaying with a text overlay on hover as well as the entire image linked to a URL
Tested using version 3.2 of the Genesis Sample child theme by StudioPress however, will work in any version of any Genesis child theme which supports Gutenberg.
Note : You could use a plugin to do this however, generally, you will be adding hundreds if not 1000’s of lines of PHP, JS and CSS code.
Installation Steps #
There’s 3 steps :
Step 1 – Upload the file named full-width.php to your child themes page-templates folder or the root directory of your theme and select the Template named Full Width Gutenberg from the Page Attributes box on your Edit Page screen. This adds a special body class to the page or post you are dealing with.
Step 2 – Copy & paste the CSS to the end of your child themes style.css file and clear caching.
Step 3 – Modify the HTML for your images using this method :
Was This Tutorial Helpful?