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

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Display Post Tags On Image Hover

This code enables you to overlay tags on image hover like this example :

You can choose the tags by tag id and swap out the default array of tag i.d’s on line 42 of the image-hover-effect.php file in the download folder.

This solution pulls a image from your images folder however it can also be used with the featured image. To do this, replace the following line of PHP code located on line 58 of image-hover-effect.php from this :

$image = sprintf( '%s/img.png', get_stylesheet_directory_uri() );

To this :

$image = genesis_get_image( array(
	'format'  => 'url',
	'size'    => 'large',
	'context' => '',
	'attr'    => array ( 'alt' => the_title_attribute( 'echo=0' ), 'class' => 'aligncenter' ),
) );

Includes CSS for media queries and is tested for mobile responsiveness as seen the following demo video.

Demo Video

Shows posts tags displaying on featured image hover and mobile responsiveness of the tags on smaller screens.

Here’s the download folder for registered users :

Register for full access

Featured Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.