JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class='gambar' id='img-1'><div class='mask'></div><img src='http://3.bp.blogspot.com/-rZHREW-_gWY/ToIdrxdWokI/AAAAAAAAAFM/dZMNkc_2hQw/beben-koben.jpg' width='400' height='225'/></div><div class='gambar' id='img-2'><div class='mask'></div><img src='http://3.bp.blogspot.com/-rZHREW-_gWY/ToIdrxdWokI/AAAAAAAAAFM/dZMNkc_2hQw/beben-koben.jpg' width='400' height='225'/></div><div class='gambar' id='img-3'><div class='mask' id='mask-1'></div><div class='mask' id='mask-2'></div><img src='http://3.bp.blogspot.com/-rZHREW-_gWY/ToIdrxdWokI/AAAAAAAAAFM/dZMNkc_2hQw/beben-koben.jpg' width='400' height='225'/></div><div class='gambar' id='img-4'><div class='mask'></div><img src='http://3.bp.blogspot.com/-rZHREW-_gWY/ToIdrxdWokI/AAAAAAAAAFM/dZMNkc_2hQw/beben-koben.jpg' width='400' height='225'/></div><div class='gambar' id='img-5'><div class='mask'></div><img src='http://3.bp.blogspot.com/-rZHREW-_gWY/ToIdrxdWokI/AAAAAAAAAFM/dZMNkc_2hQw/beben-koben.jpg' width='400' height='225'/></div><div class='gambar' id='img-6'><div class='mask'></div><img src='http://3.bp.blogspot.com/-rZHREW-_gWY/ToIdrxdWokI/AAAAAAAAAFM/dZMNkc_2hQw/beben-koben.jpg' width='400' height='225'/></div>

CSS

body
{
    background:#debe94;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 1px 1px #FFFFFF;
    padding:10px;
}
.gambar{margin:0 auto;float:left;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s}.gambar:hover{cursor:pointer;-webkit-transform:scale(0.7);-webkit-box-shadow:0 0 20px #555;-moz-transform:scale(0.7);-moz-box-shadow:0 0 20px #555;-o-transform:scale(0.7);-o-box-shadow:0 0 20px #555}.gambar .mask{width:400px;background-color:rgba(191,138,64,.9);position:absolute;height:100%;-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s}#img-1:hover .mask{height:0%}#img-2:hover .mask{height:0%;margin-top:120px}#img-4:hover .mask{margin-left:200px;margin-top:115px;height:0%;width:0%}#img-3 #mask-1{width:50%}#img-3 #mask-2{width:50%;margin-left:200px}#img-3:hover #mask-1{width:0%}#img-3:hover #mask-2{margin-left:400px;width:0%}#img-5:hover .mask{margin-left:219px;margin-top:135px;height:0%;width:0%;-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg)}#img-6:hover .mask{height:0%;margin-top:225px}