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 {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-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:
class="linkopacity"

So your links should look like this:
<a class="linkopacity" href="http://blog.pocketwonders.ca"><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...