24 August 2015

How To Make Photos Fade on Hover

Today's post comes to you from the depths of my blogger archive. Please enjoy this revived tutorial. :)

Here's whatcha gotta do:

1. Log into your blogger account and select the blog in which you'd like to customize.
2. Go to Template >> Customize >> Add CSS and paste the below code into the box.
3. Customize, save your changes and voila! You're done.

img:hover { opacity: .4; }

To customize the transparency:

The number in red (see above) decides how transparent your photo is on hover. The numbers range from .9 to .1 (as you decrease the number, the transparency becomes more, well, transparent).

I chose .4 in the example above because I consider it a good medium transparency. ;)

Need help?

Leave a comment below! I love hearing from my readers. :)

xx, Nicole Rose


  1. *skips around delightedly* It worked! It worked! o.o Thank you, Rosie. <3

  2. Thank you so so so much for this tip. And can you show us how to change the highlight color when you highlight something?

    Thank you so much!

  3. Yay it worked! *happy dance*

  4. How do you make it s l o w ?

  5. Hi Rose! Very helpful!!! I was just wondering how you made links expand?

  6. Hello! Like Tane, a quick question if you would be willing to share - how do you delay the change? x

    1. Thank you for adding the new code, these tips are very useful! x


All comments I receive are cherished for many hours after reading them. Thank you for taking the time to type something to me.

xx Nicole Rose

Get my eBook, How to Be Forgotten

a collection of stories and journal entries from the days that made up 2014.