 |
 |
I was looking at Alt’s speaker page last night and I noticed that the photos lightened when my mouse rolled over them. I assumed that the effect was accomplished with old school rollover techniques (switching multiple images or css sprites). However, when I checked with Firebug, I saw that they were using the opacity property! This technique is more common now that modern browsers can handle image opacity.
 |
 |
The CSS opacity property can alter any element on your page (ie. text, images, divs, whatever you want). For an example, roll your mouse over the donuts or Taco’s yearning face and you’ll see that the photos appear to “lighten”, but really, it’s just more of my white background showing through. This is a neat trick — check out the screencast to see how you can use it on your sites.
Thanks for waking me from my 1990′s slumber, Alt!
.change_opacity:hover{
/* FIRST (order is important) */
opacity: 0.8;
/* SECOND (IE8) */
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
/* THIRD (IE7) */
filter: alpha(opacity=80);
}
Need a CSS review? Check out my Web Basics tutorials. How about a Firebug review? I used Firebug in these screencasts: Banish Drop Shadows, Horizontal Nav Bar Part 3.
Thanks for the IE fix, Quirksmode!
ht gelateria from myfonts
cheap pine from myfonts
script bt
miso from font squirrel
verner from myfonts
{ 27 comments }
that’s very cool. thanks for sharing (:
Thank you so much for posting these!
Your blog is such a big help. I follow you via bloglovin, and I always click on the “like” button so I’d know easily where to find you.
Love,
Nini
i love your tutorials, and by proxy mr. allen cote.
he’s sort of a babe. haha.
Thank you so much! In the middle of the night last night I was thinking that a button on my website needed a little “je ne sais quoi”, but it was late and I decided to sleep on it. Low and behold, in my Google Reader this morning your sweet sweet tutorial! And the perfect inspiration for not only my button, but my logo as well! Thanks again!
Awesome! i’ve just used your tutorial for my sidebar and this is perfect!! Thanks Miss, you’re the best! :)
This is pretty neat, I may try to incorporate this in my site :)
Love this! So easy and I always wondered how to do this.
Thank you for another amazing tut :-)
glad you guys like this! it’s perhaps one of the simplest things you can do to make your site a bit more visually engaging and “dynamic”.
@liliestfolle: EXCELLENT!
you are bomb lady! :D
Just have to tell you – I LOVE the music in this video.
And your tips are so inspiring. I will have to start a blog just so I can have fun with all of your tutorials – and show my results to the world :)
OMG, I love the slider, Katrina. Looks so cool. Pugly gets better and better :-)
Aaaah, you noticed the slider! Thanks, Anilu.
that is one cute pug
First of all, totally addicted to your blog!
Secondly, I’m sure this is a very silly question, but is there an HTML equivalent?
@Hester: wow, thanks, hester. :) to address your 2nd Q: sorry, no HTML equivalent.
I just have to say that Taco should get a donut. I mean, look at that face. I’d totally give in (^•^) And those are the prettiest vegan donuts I’ve seen. Yum!
I just found you yesterday and I may never leave…everything is so beautiful and I am excited to try the tutorials. :)
Hey Katrina, Love your blog! I tried this on one of my posts… easy peasey. Thanks to your tutorial! I am sharing this on our blog today. Hope you don’t mind the free PR! Sidenote: my son, Adam, starts college in less than 20 days at Columbia College. He is very excited!! So, glad to know the college graduates smarty pants like you. ;)
such a simple thing with such an impact!
do you still plan on doing a tutorial on the hover like you have in your nav menu?
@karla: hi karla — yes! :D i kinda got sidetracked, but yes, that’s the plan — please stay tuned.
@vicki: THANK YOU. :D
oh happy day!!! :) I’ve been looking forward to that one — I’ve made them for developers to use in sites, but have never learned the coding aspect of it.
*happy dance*
What a lovely little tip. Simple, classic effect, but adds a nice touch of elegance. Thank you!!
Oh Katrina, thanks so much for doing this tutorial! I just tried it, worked great! Love nifty little things like this that you find for us. :)
Oh and YUM on the donuts! I had my first vegan donut not to long ago and I agree — one of the best donuts I’ve ever had! Just yum. :)
Yay, I did it! I’m not sure I like the faded effect though. Is there a way to make it actually greater opacity, if that makes sense? Instead of lesser opacity when you roll over it, will a 120% opacity work?
what is firebug and how does it work, how do you download it? I went to firebug.com but couldn’t really figure out what I need.
@jodie: 100% is max. and, you can learn more about firebug here.