Let's improve your life & blogging experience.


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. Les V7.2.14

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

  2. Cathy7.2.14

    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. Brooke Jordan27.2.14

    Yay it worked! *happy dance*

  4. Tane Hannah10.3.14

    How do you make it s l o w ?

  5. Eve17.7.14

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

  6. Paige31.12.14

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

    1. Paige31.12.14

      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 even more advice - for free.

Sign up to receive exclusive content in your inbox.
* indicates required