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

   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…

Log in to your Blogger account

• 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/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/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/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/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/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/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/AVvXsEj2oihOnT64cSzJ6OD1k1UAnyc59dFoAyromJRI12uZru_uaMt1ostQKAFQYfm-F9uLUcMM9hSDCOTNmuyPzo8GzvtGQVhlHeLXf8J3GUvcbISnuYkj0kBiXtALfb7l-VKz7Ss5mQa6eM1b/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…

Posted in: Blogs and Websites