How To Create Drop Shadows Image And Zooming Effect On Blogger Post With CSS

This time I wanted to share again, just a simple trick how to create or add a zooming effect and drop shadows on images with CSS3. like the example shown below :

If you are interested in adding effects or post this on your blog, it is very easy, just follow these steps:
1. logged into your blogger account
2. Click on the dashboard >> Template >> Edit HTML
3.  Find the code ]]> </ b: skin> (Use Ctr + F for easy searching)
4. put the following CSS code above the code ]]> </ b: skin>

.TTB-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TTB-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

5 To display the zooming effect and drop shadows on the image of your blog posts. In the HTML editor posts just add the following code:

<div class="TTB-CSS3">
<img src="Image URL Here" />
</div>

6. Change Image URL Here with the URL/link image you want to display in your posts.
Thus tutorial how to create a zooming effect and drop shadows on the image. May be useful.

Posted in: Blogger Design,Blogger Layouts,Blogger Tips,Blogger Tutorials