HowTo Make Image Hovering Effect with Simple CSS Code

Advertisement

CSS stands for Cascading Style Sheets which is used for presenting the design of a page. With CSS all you need to do is put a piece of code in your style sheet to automagically make anything work. Today we will see simple image hovering effect using piece of CSS code.

You can use the image hovering effect in all your blog post, it will look awesome. All you need to do is, just add small piece of code in your custom style sheet and when ever adding images, use “linkopacity” class

Steps to Follow on WordPress Blogs –

1. Go to your stylesheet.css

2. Insert this code

#center{ text-align:center; padding:auto auto auto auto;}
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; }

3. Then add a class=”linkopacity” to the link when you want to make the rollover. It works with hyperlinked text and images.

For example : when ever you add images, just go to html view and add

<a class=”linkopacity” >

It should look like

<a class=”linkopacity” ><img src=”http://yourblogname.com/imagename.jpg”></a>

That’s it. Done !

Steps to Follow For Blogspot Blogs –

1. Put the code in the head section of your template between the head tags

<head>
<title>CSS Image Hover Effect</title>
<style type=”text/css”>
#center{ text-align:center; padding:auto auto auto auto;}
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; }

</style>
</head>

2. Then add a class=”linkopacity” to the link when you want to make the rollover. It works with hyperlinked text and images.

For example : when ever you add images, just go to html view and add

<a class=”linkopacity” >

It should look like

<a class=”linkopacity” ><img src=”http://yourblogname.com/imagename.jpg”></a>

That’s it. Done !

You can see the live demo below, Just move your mouse over the picture and see the simple effect.

Got Something to say ? Do you have any similar kind of tips for image hovering effect ? Share with us !

For a limited time I'm sharing some select Tips and Tricks and How-To Guides for FREE.

Comments

  1. You need to make corrections for blogger.

  2. ashwin says:

    thanks for the share i was thinking to add this effect on my social networking widget , and i got it here. am going to add this now ;P

  3. Hi, I was looking for an effect that I thought would be “hovering”, but apparently it’s not. What I want is to have social icons that are always on the right side of the screen for WordPress. Even when you scroll down, they should stay in the same position. How can this be achieved? Thanks!

Trackbacks

  1. […] This post was mentioned on Twitter by Srivathsan G.K and Srivathsan G.K, Jithin Mathew. Jithin Mathew said: HowTo Make Image Hovering Effect with Simple CSS Code http://tinyurl.com/37y38p5 […]

  2. HowTo Make Image Hovering Effect with Simple CSS Code : : css says:

    […] Zobacz resztę artykułu: HowTo Make Image Hovering Effect with Simple CSS Code […]

  3. HowTo Make Image Hovering Effect with Simple CSS Code | My Blog says:

    […] the original post: HowTo Make Image Hovering Effect with Simple CSS Code This entry was posted on Thursday, June 17th, 2010 at 6:13 am and is filed under Uncategorized. […]

  4. HowTo Make Image Hovering Effect with Simple CSS Code | CSS Guru How to CSS says:

    […] the original here: HowTo Make Image Hovering Effect with Simple CSS Code Share and […]

  5. Image Hovering Effect with Simple CSS Code - PSD to HTML says:

    […] Read the rest and get other great css tips and tricks: Image Hovering Effect with Simple CSS Code […]

Speak Your Mind

*