0 Add Zooming Effect and Drop shadows on Images with CSS3

I am going to share a simple but very useful trick for BloggerSpice readers. Just a simple trick to create or add zooming effect and drop shadows on images with CSS . You can apply this trick on a specific Image that will make your blog more attractive.  If you are interested in adding this effect on your blog or your post, it is very easy, just follow these steps:

Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.

/* Zooming Effects by www.bloggerspice.com*/
.BS-Zoom 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;
}
.BS-Zoom 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;
}

How to Use?

Well now we will learn how to make this work. When you will go for add this effect just  add the following piece of code.

<div class="BS-Zoom">
<img src="Image URL Here" />
</div>

• Change Image URL Here this line with your image URL.