How to add image hover effects in thesis and other wordpress themes,blogger

May 29, 2010 by: sensehow 0

Tweet

Image hover effects makes your blog looks pretty and also improves performance of affiliate images and social bookmarking icons.It is easy to imply these image hover effects in wordpress and blogger.I have also explained how to add it in thesis wordpress theme.So check below to add a hover effect or mouse over effect tutorial.

HOW TO ADD IMAGE HOVER EFFECT:

FOR THESIS AND WORDPRESS THEMES:

1.Goto Custom file editor in wp-dashboard and click edit Custom.css and at the end paste the css code (given at the end of this post)for the required hover effect.

2.Now when adding a image add the required tag (for eg “Fadein”)into the image code as shown below.

FOR BLOGGER BLOGS-IMAGE HOVER EFFECT:

1. Go to Blogger > Layout > Edit HTML
2. Search for ]]></b:skin>
3. And now paste any of your preferred CSS: code just above ]]></b:skin>
   
4. save it

Now whenever you write a post add the required tag for hover effect as below.

LIST OF HOVER EFFECTS AND CSS CODES,TAGS:

HOVER EFFECT 1:

CLASS=simple1

CSS CODE:

.simple1 {
padding:5px;
border:1px solid #ccc;
}
.simple1:hover {
padding:5px;
background-color:#ccc;
}

HOVER EFFECT 2:

CLASS=simple2

CSS CODE:

.simple2 {
padding:5px;
background-color:#ccc;
border:1px solid #ddd;
}
.simple2:hover {
padding:5px;
background-color:#eee;
border:1px solid #666;
}

HOVER EFFECT 3:

CLASS=black-white

CSS CODE:
.black-white {
padding:5px;
border:1px solid #ccc;
}
.black-white:hover {
padding:5px;
background-color:#fff;
border:10px solid #000;
}

HOVER EFFECT 4:

CLASS=dashed

CSS CODE:
.dashed {
padding:5px;
border:1px solid #ccc;
}
.dashed:hover {
padding:5px;
background-color:#fff;
border:2px dashed #000;
}

HOVER EFFECT 5:

CLASS=top-bottom

CSS CODE:
.top-bottom {
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
}
.top-bottom:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}

HOVER EFFECT 6:

CLASS=curtain
CSS CODE:
.curtain {
padding-top:10px;
padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
}
.curtain:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}

HOVER EFFECT 7:

CLASS=red
CSS CODE:
.red {
padding:5px;
border:1px solid #ccc;
}
.red:hover {
padding:5px;
background-color:#E71305;
border:10px solid #ddd;
}

HOVER EFFECT 8:

CLASS=Fadein
CSS CODE:
.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HOVER EFFECT 9:

CLASS=Fadein2
CSS CODE:
.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

HOVER EFFECT 10:

Image Description here

For this effect you have to use the coding as below for images.Add the same image url in both the fields below.Add a image description.

IMAGE CODING:

<a><img src=”Add Image URL Here” border=”0px” alt=”" width=”100px” height=”100px” /><span><img src=”Add Image URL Here” alt=”" />
Image Description here </span></a>

CSS CODE:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

Now you will be able to add image hover effects to bloggers,thesis and other wordpress themes.Be sure to subscribe to our updates to get more blogger,wordpress tutorials to your email.

Related posts:

1. How to add stylish page navigation in thesis using wp-pagenavi
2. How to add page navigation in thesis without openhook plugin
3. How to add a widgetized 3 column footer in thesis wordpress theme
4. How to add author profile box below posts in wordpress themes
5. Adding author profile box in thesis wordpress theme
6. How to highlight author comments in thesis wordpress theme with background and logo