Sunday, 27 May 2012

Fade in and Reflect

Sunday, May 27, 2012 Unknown No comments

This CSS effect is pretty complicated than other. Here default image state is at a slightly reduced opacity. When you hover over it, the opacity cranks to full and a flow appears around the edges and a reflection (using webkit) occurs on image..




#CODE#


<html>
<head>
<title> css fade and reflect</title>
<style text="text/css">
#ex5 {
 width: 300px;
 margin: 0 auto;
 height: 300px;
}


#ex5 img {
 margin: 25px;
 opacity: 0.8;
 border: 10px solid #eee;


 /*Transition*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;


 /*Reflection*/
 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}




#ex5 img:hover {  
   opacity: 1;


   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));


   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
</style>
</head>
<body>
<div id="ex5">
<img src="a.jpg" id="ex5">
</div>
</body>
</html>



Demo :






*Hit a comment if you like this or have any doubt.
Posted in:

0 comments:

Post a Comment

This provides free backlink for you so feel free to comment and get a free backlink.