Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#ex5 {
    width: 700px;
    margin: 0 auto;
    min-height: 300px;
    background:black;
}
 
#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 50px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 50px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 50px rgba(255,255,255,0.8);
}
</style>
</head>
<body>
<div id="ex5">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
            <img src="http://lorempixum.com/100/100">
        </div>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers