28 August 2011

CSS3: Add Expand Drop Shadow Images

How to Add Drop Shadow on Images while On Mouse Over

Learn how to create Drop Shadow on Images while Mouse Over it. It is a Style CSS3 script that will be using here. As i explore over 'blogging tips' websites i found an interesting script that will be useful for me in future projects.

Without any words Lets get started.
1. In your <head> </head> Tag..put the <style> in between of that tag.

<head><style>
.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;}
<style>
</head>
Take Note:  Most CSS3 Syntax in Lines have Comments( an explanatory descriptions ).

2. Add Div Code in the <body> Tag

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

Sample OUTPUT:


Then you are done! It works on New Browsers so you may feel comfortable! How About IE? Nah, =)
By the way, you may notice this MBT,  i found this script in this site: MBT = MyBloggerTricks
Advertisement


Featured Offers:
Advertisement