Tricks Of The Code: Add A Transparent Hover Effect To Images {Blogger}

Sunday, January 24, 2016
Add a Transparent Hover Effect to Images on Blogger

Okay this is a really quick and simple tutorial. The transparent hover effect will only affect images in the post body, so your header or images in your sidebar will not be affected.
Remember to always backup your template before making any changes to the code. If your not sure how to do so just go to Blogger > Template > Backup/Restore (Button) > Download Full Template (Button)

Login to your Blogger blog and go to Template > Customize > Advanced > Scroll Down To Find Add CSS.

Then paste the code below into the box. You can also add it before ]]> </b:skin> through your HTML template.

.post-body img:hover { opacity: .5; }

You can change the level of transparency by changing the value .5. The higher the number is the more opaque the effect becomes. The value 1 makes the image completely opaque and the value 0 makes the image completely transparent (as in invisible) when you hover over it.

I hope this was helpful, if this isn't working for you feel free to leave a comment down below, and I'll see if I can be of help.