• 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

Overlay Title Description OR Caption On Featured Image Hover With Grayscale In Brunch Pro

The code in this tutorial adds a hover overlay to all featured images displayed using the Brunch Pro themes custom Featured Posts widget.

The code also changes the color of all images too black and white as seen in the 3rd image hovered in the following screenshot taken from the testing site.

Grayscale Image Color With Hover Overlay Text

In this example, the Brunch Pro Featured Posts widget is added to the Homepage : Above widget area displaying 3 featured posts in columns.

On mobiles, each entry displays in one single column as seen in the following demo video.

Demo Video

Shows the Brunch Pro themes featured posts widget added to the Home Top widget area.

Displays either the entry title, caption or image description on hover and changes the image color to black and white on hover.

Also displays each post in a single column on smaller screens.

Installation Steps

  1. # Upload the file named display.php to the Brunch Pro themes lib > widgets > featured posts > views folder replacing the default display.php file.
  2.  

    Step 1

  3. # Copy & paste the CSS from the style.css file to the end of the Brunch Pro themes style sheet and clear caching.
  4.  

    Step 2

Download Folder

If you only want to target featured posts in the Homepage : Above widget area, add the .home-top class before the 1st selector for each CSS rule inside the download folders style.css file.

Related Tutorials

  • How To Show The Caption Description & Title On Hover Using The Genesis Featured Page Widget
  • How To Overlay Title & Featured Image Attachment Details Using Genesis Featured Posts Widget
  • Display Genesis Featured Posts In Horizontal Grid With Overlay Title On Hover

Brunch Pro Theme Featured Image Genesis Featured Posts

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.