Add Drop Shadows to Images and Expand them on Mouse Hover

How To add Drop Shadows and Enlarge Images on Mouse Hover?

The methods are really simple.

1. Go to Blogger > Design > Edit HTML
2. Back up your template
3. Search for ]]></b:skin>
4. Just above ]]></b:skin> paste the following code, 

.MBT-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;
}
.MBT-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;
}

If you wish to further decrease the image size then decrease 0.7 or if you wish to further fade the image then decrease 0.5
You are almost done. Now when ever you want the image to appear with this effect, simply use this code,

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

Upload your image to Blogger editor and replace Image URL Goes Here with your image link. You are done. Now visit your blog to see the effect working in action and yell out Bravo! :P
If you wish to add this effect to another image just keep on adding <img src="Image URL Goes Here" /> before </div>
This effect is compatible with latest versions of Mozilla, Safari, Opera, Chrome and as usual not that effective with boring IE. I just hope you liked it.