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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • 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 Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.