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 !
Liked this post? Got something to say? Share/Comment below. You can also Get Regular Updates. Subscribe to Free RSS Feeds or Email Updates. Follow us on Twitter @madrasgeek and Like us on Facebook.
Share :
{ 5 trackbacks }
{ 7 comments… read them below or add one }
You need to make corrections for blogger.
what corrections ..please specify here. as i want to add this on ma blog.
There is no need of corrections, just place the css code in your style sheet which is below head tag. Place it and save it. Now add link opacity class to your image. Live example on blogspot blog – check out – http://dailysearch123.blogspot.com/2010/06/example-of-image-hovering-effect-using.html
thanks dude. it is not working when u place it just after head or just before closing head. correction:-
find ]]>
and past this code above it
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; }
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
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!
will write a tutorial on what you’re asking. It can be done easily. Floating icons on the right side of wordpress blog.