Genesis Tutorials

How To Add Image Hover Overlay Text To Gutenberg Images

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.

Gutenberg Image Hover Overlay Effect

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 :

Related Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *