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

7 comments

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

    ReplyDelete
  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!

    ReplyDelete
  3. Yay it worked! *happy dance*

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

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

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

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

      Delete

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

Join the newsletter outreach.

Sign up to receive creative chit-chats.