Create a zoom effect
Minggu, 28 Agustus 2011 by srobs
This time I will share about how to create a zoom effect on the image in each post by using css. its effect is similar to the usual effect jQuery, and I think this is more simple because it only adds a little CSS code without having to struggle with complicated script.
And another advantage for using CSS then automatically posts the entire image at any zoom effect will generate automatically. So we do not need to insert any code on the post.
This is the example
The code as below
add the following code after ]]></b:skin>
may be useful
regards
And another advantage for using CSS then automatically posts the entire image at any zoom effect will generate automatically. So we do not need to insert any code on the post.
This is the example
The code as below
.post img, table.tr-caption-container {
border:none;
max-width:560px;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
add the following code after ]]></b:skin>
may be useful
regards
Posting Komentar