Tuesday 6 August 2013

Cute image hover...



Assalamualaikum dan hai semua...^^,
Dah lama rasanya tak buat tutorial...ok harinie saya nak buat tuto pasal image hover lagi..


Ok let's begin...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code    img{   or  img {  or   a img {  then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code   img{  or  img {  then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before  </style>   for blogskin and before
]]></b:skin>   for template designer.

Code for all image..
Img {
border:2px solid #FFFFFF;
-webkit-box-shadow: 0px 0px 8px 8px #FFEBEB;
-moz-box-shadow:    0px 0px 8px 8px #FFEBEB;
box-shadow:         0px 0px 8px 8px #FFEBEB;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out; }
Img:hover {
-moz-transform: scale(0.7) rotatey(360deg);
-o-transform: scale(0.7) rotatey(360deg);
-webkit-transform: scale(0.7) rotatey(360deg); }

 Code for only one image...
<style>
.cutes{
border:2px solid #FFFFFF;
-webkit-box-shadow: 0px 0px 8px 8px #FFEBEB;
-moz-box-shadow:    0px 0px 8px 8px #FFEBEB;
box-shadow:         0px 0px 8px 8px #FFEBEB;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.cutes:hover{
-moz-transform: scale(0.7) rotatey(360deg);
-o-transform: scale(0.7) rotatey(360deg);
-webkit-transform: scale(0.7) rotatey(360deg);
}
</style>
<img class="cutes" src="http://data.whicdn.com/images/33714608/tumblr_ly5gnll0C91qisocmo1_500_large.jpg" width="450" /></div>
The notes ;
Purple text : Colour code find it here
Blue text : Your image URL
Red text : Image width..
Then, preview and save... ;-) do comment if you use this tutos...
Don't re-post this tutorial because I made this tutorial by myself...
Ok see you soon...Assalamualaikum and happy eid ul fitri..

No comments:

Post a Comment