• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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.

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 :

Register for full access

Related Tutorials

  • Template For Custom Genesis Grid Loop With Image Hover Overlay
  • Archive Template With Featured Image Hover Overlay
  • Zoom Featured Image On Hover With Title Overlay
  • Archive Template With Featured Image Hover Overlay

Grid Columns Gutenberg

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems