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...
No comments:
Post a Comment