Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<body>
  <div id="backdrop">
        <div class="box">           
            <div class="box-image lime clear"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image lime clear"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image lime clear"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image lime clear"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image lime clear"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image lime clear"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image lime"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
            <div class="box-image green"></div>
        </div>      
    </div>
</body>
 
    html, body, div {
        margin: 0;
        padding: 0;
    }
    #backdrop {
        width: ;
        background-image: url('http://bronx.herokuapp.com/dark-grey-tile.png');
        margin: -20px -25px 15px;
        padding: 20px;
        overflow:hidden;
    }
    .box {
        margin: 50px auto;
        width: 1050px;
    }
    .box-image {
        background: url('http://bronx.herokuapp.com/gear-48.png') 0px 0px no-repeat;
        background-position: 10px 10px;
        opacity: 0.7;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        position: relative;
        z-index: 10;
    }
    
    .box-image {
        width: 68px;
        height: 68px;
        overflow: hidden;
        float:left;
    }
    
    .box-image:hover {
        -webkit-transition: all 0.7s linear;
        -webkit-transform: rotate(6.28rad);
            transition: all 0.7s;
        transform: rotate(6.28rad);
    }
    .box-image.red {
        background-color: rgba(255, 32, 32, 0.4);   
    }
    .box-image.lime {
        background-color: lime; 
    }
    .box-image.skyblue {
        background-color: skyblue;  
    }
    .box-image.green {
        background-color: rgba(32, 255, 0, 0.4);    
    }
    .box-image.blue {
        background-color: rgba(32, 32, 255, 0.4);   
    }
    .box-image.yellow {
        background-color: rgba(255, 255, 32, 0.4);  
    }
    .clear {
        clear: both;
    }
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers