If you hover over any of the images in my blog posts you’ll notice that the opacity changes. Now while my jQuery Pin It Button plugin is responsible for that, you can get the same effect with some CSS. Here’s how to change the opacity of an image on hover.
In your stylesheet, add the following bit of code:
Opacity can be changed to any value from 0.0 to 1.0. The closer the value is to 0.0, the more transparent it will be.
If you don’t want all your images to change opacity on hover, you can specify a specific class of images to apply this effect to. So for example, if you wanted only your sidebar images to change opacity on hover, you would use the following:
Note that the class you are targeting may vary depending on your theme, but the idea will still be the same.
Want more tips to better your blog? Subscribe to my weekly tipletter for exclusive tips, tricks, and offers delivered straight to your inbox.