Skip to main content

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

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

Post a Comment

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

Popular posts from this blog

Room Tour 2019

I've always wanted to do one of these posts. If not for the enjoyment of others, for the enjoyment of my future self to look back on and realize how much my style and space have changed. My door. I think I'm sooo artsy for taping paint swatches to my door. And I actually love how it looks too. I was going for "Starry Night" with my own little twist -- and without the actual paint. ;) This is what my room looks like from the doorway. Can you guess what the theme is? It's funny -- a few weeks ago I was discussing with Kenzie how my room has this coral and aquamarine vibe to it, yet my Instagram theme is focused on yellows and blues, and my actual fashion style is very grungy/hispter/artsy. So it all comes full circle, I guess? Still, I love my room. It's my safe haven. Now come on in so I can give you the full tour... Right as you walk in, you will see my DIY jewelry hanging on the wall to your right. It's quite a balancing act when I

How and Why: Linkup Parties

Starting out as a blogger can be really hard. You want to grow your blog, but even though it seems like you've tried everything, nothing works. Your blog hasn't expanded in the least. You don't see any improvement. That's why in this post I'm going to share with you the miracle of link up parties! I'm going to go over how they work, why you should create your own, which hosts you should use and much, much more. Let's get started, shall we? :) Share this post to help other bloggers learn about linkup parties. How they work The typical link party can be broken down into 3  basic*  parts. * Every link up is different, so as you're reading through this and considering to create your own, consider adding a unique twist to your link up party. After all, people tend to get tired of seeing the same old same old. The sponsors These are the people who came up with the original idea of that particular link party. It can be anyone from you on your

Expression // 005

Friends Make up new words together. Hug attack each other so hard that it hurts. Throw glitter at your face. Tell you stories off the top of their head. Comfort you when no one else can. Beat up whoever makes you cry. Make you laugh till your insides hurt. Obsess over celebrities and books with you. Help you get through the rough days. They complete each other. xx Nicole Rose