seo How To Add Four Different Mouse Hover Effect For Images In To Your Blogger 2013

on Thursday, March 07, 2013 | 0 Comment

Seo Master present to you:

Friends ,This is a useful post about how to apply different mouse hover effect to your picture in blogger. Now i show four effect to your blogger. This effect works with CSS3 script you can add this four effect on your Blogger. Follow this instructions carefully and add it in to your blog…

Select on Template Option.

Click on Edit HTML .

Find (CTRL+F) ]]></b:skin> tag.

Copy and paste CSS code above ]]></b:skin> tag.

Copy and paste HTML code, where you want to see your image. ( Replace highlighted RED color with your image link )

EFFECT -1

CSS code

.efecto-rotate-uno {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-uno:hover {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}

HTML - code

<img class="efecto-rotate-uno" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

Replace highlighted RED color with your image link

EFFECT –2

CSS code

.efecto-rotate-dos {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-dos:hover {
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
transform:rotate(10deg);
}

HTML - code

<img class="efecto-rotate-dos" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

Replace highlighted RED color with your image link

EFFECT - 3

CSS code

.efecto-rotate-tres {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-tres {
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
transform:rotate(-10deg);
}
.efecto-rotate-tres:hover {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}

HTML - code

<img class="efecto-rotate-tres" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

Replace highlighted RED color with your image link

EFFECT – 4

CSS code

.efecto-rotate-cuatro {
background:#FFF;
border: 1px solid #CCC;
    display: block;
    line-height: 0;
    margin: 4px;
    padding: 4px;
    -moz-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    cursor:pointer;
}
.efecto-rotate-cuatro:hover {
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
}

HTML - code

<img class="efecto-rotate-cuatro" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAeN6SkTdnl0tEuqWfG53rR_3txEcCulUgzxBGEsgYeHnTx1HPUQUdWbEpKB4mL3cCrINMb4XprCMgmYuW8CLK5dZRZb4txOEZnlE8SZPZlWjPhuOlhStiPNMyeyVecKu1yJvYyRanVvuN/h120/tump-03.png" />

Replace highlighted RED color with your image link

Are you happy.???/…… Leave a commnet if it is not working on your blogger…

2013, By: Seo Master

Labels: Blogs and Websites