Create a zoom effect

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

.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