Thursday, May 5, 2011

Tutorial Thursday: Hover Image Opacity

We're going to do this today:

Hover over image

You'll see this all over my website. It's an easy way to make links stand out. So how do we do this?

Go to Dashboard> Design> Edit Html and put this in between your <head></head> tags (with your existing CSS).

a.linkopacity img {
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Now go to any image on your website and add this to the link:

So your links should look like this:
<a class="linkopacity" href=""><img src="image link here"></a>

Test it out :)

Sidenote: You can play with the "0.5/50" to play with the opacity. 50% = 50% more transparent. 100 = opaque.

1 Comment:

mako said...

Thanks for sharing this with us! ^_^ I will try it out on my page!

Related Posts Plugin for WordPress, Blogger...