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.
Leave a Reply