Genesis Tutorials

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.

    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.

    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

Leave a Reply

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