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.
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
- # Upload the file named display.php to the Brunch Pro themes lib > widgets > featured posts > views folder replacing the default display.php file.
- # Copy & paste the CSS from the style.css file to the end of the Brunch Pro themes style sheet and clear caching.
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.
Was This Tutorial Helpful?