Hex Gallery

Simple Hex gallery using images. This isn't the responsive version.

by Victor

HTML

<div class="hex">
    <span class="colorOverlay">
    </span>
    <img...

CSS

.hex {
    /* background: red; */
    display:block;
    float:left;
    margin:0;
    padding:0;
    position:relative;
    
}
.hex img {
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
 
}
.colorOverlay {
    width:100%;
    height:100%;
    position:absolute;
    margin:0;
    padding:0;
    top:-100%;
    left:-100%;
    z-index:3;
    display:inline-block;
    background: rgba(120,190,120,0.5);
}
.hexOverlay {
    content:'';
    display:inline-block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:5;
    background:none;
}

JavaScript

$('.hex').hover(function(){
    $(this).find($('.colorOverlay')).animate({"left":"0px", "top": "0px"},400);
}, function(){ 
     $(this).find($('.colorOverlay')).animate({"left":"-100%", "top": "-100%"},400);
});