HOW TO ADD A SHADOW ON THE PHOTO AND MOUSE HOVER EFFECT

after yesterday I share flipper share wiidget
this time moonroemoort will share how to add a shadow on the photo and mouse hover effect

LIVE DEMO

• enter the blogger dashboard
• click the template
• backup template
• click edit HTML
• find the code ]]></b:skin>
• right above the code ]]></b:skin> open the code below

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

to display the photo with mouse hover effect and the shadow is simply use the code below

<div class="MBT-CSS3">
<img src="PHOTO URL HERE" />
</div>

If You want to add this effect to images others just keep adding the URL of the src="Image <URL of PHOTO HERE" /> before </ div>

This effect is compatible with the latest versions of Mozilla, Safari, Opera, Chrome

HOW TO TAKE PHOTO LINK

• sign in with your gmail account or fb account to photobucket.com
• click upload
• wait until it is finished
• click direct to copy the photo link