Galery gambar dengan effek mask css3

pembuatan galeri gambar dengan menggunakan css3 dengan efek mask yang terdapat deskripsi kami mencoba hal yang berbeda yang dapat Anda lakukan dengan properti CSS . Dengan mask CSS, Anda dapat menutupi atau klip setiap elemen ke bentuk yang diinginkan. untuk membuat sebuah galeri gambar ini cukup simple dan tidak serumit yang kita bayangkan karena mekai full css3 dan no jQuery untuk itu kita simak bersama-sama bagaimana pembuatanya
1. Kopi dan tempelkan kode css ini dalam document html
css

.box-post {width:23%;

background:#ffffff;display:block;position:relative;border:solid 2px #eeeeee; overflow:hidden;color:#FFFFFF;height:180px;float:left;margin:4px;-moz-box-shadow: 0 0 2px #999999;-webkit-box-shadow: 0 0 2px #999999;box-shadow: 0 0 2px #999999}

.box-post img {width:100%;height:100%;}

.box-post a{color:#ffffff;}

.image-mask .mask-title {width:99%;height:0px;overflow:visible;background:rgba(0,0,0,0.7);opacity:0;height:0px;

position:absolute;top:0;left:0;display:block;padding:3px;text-align:center;font-family:Arial, Helvetica, sans-serif;

font-size:17px;line-height: 1.4em;text-transform:uppercase;}

.image-mask:hover .mask-title{background-color: rgba(0,0,0,0.6);filter: alpha(opacity=0);opacity: 1;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;height:140px;padding:3px;cursor:pointer;}

.image-mask .mask {width:99%;height:0px;overflow:visible;background:rgba(0,0,0,0.3);opacity:0;height:0px;

position:absolute;bottom:0;left:0;display:block;padding:3px;text-align:center;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}

.image-mask:hover .mask{background: #459BF9;opacity: 1;height:30px;line-height:30px;font-family:Arial, Helvetica, sans-serif;zoom:150%;}

.mask a{text-decoration:none;color:#fff}.mask a:hover{text-decoration:none;color:#CCCCCC}

2. Sekarang kita tinggal panggil dengan htmlnya
html

<div class="box-post image-mask">

<div class="mask-title">Title</div>

<img src="thumb2.jpg" />

<div class="mask"><a href="#">Reamdore</a></div></div>

<div class="box-post image-mask">

<div class="mask-title">Title</div>

<img src="thumb2.jpg" />

<div class="mask"><a href="#">Reamdore</a></div></div>

<div class="box-post image-mask">

<div class="mask-title">Title</div>

<img src="thumb2.jpg" />

<div class="mask"><a href="#">Reamdore</a></div></div>