Add Widgets To News Themes Front Page With Hover Effects

In this tutorial we’ll be adding 3 text widgets inline with images and a title to the front page of the News theme Version 2.0.

Note: Version 2.0 of the news theme is not mobile responsive and therefore i have NOT included any CSS code for Media Queries. I will add this code when the theme is updated to the new version.

Here’s what the code generates without the hover effects:

You can easily change the colors and even add hover effects to each image in the widgets.

Functions File

Style Sheet

Hover Effect

Add this code to the end of the style sheet to add a hover effect which changes the opacity.

Here’s the effect this code generates when one of the images in these 3 text widgets are hovered over:

Note: If you would like to populate the widget areas with anything other than text widgets, you will need to modify the code which is presently not covered in this tutorial.

Here’s the full page view

Note: I will be publishing more tips and tricks about how to add hover effects to images in widgets and portfolios soon.

More Tutorials For The News Theme

• Change News Themes Home Top Widget To Home Top Left & Right Widgets