Membuat gallery kumpulan gambar dengan layout display : flex, dan menampilkan transisi gambar yang membesar ketika kursor diarahkan ke gambar.
Pertama-tama kita buat sebuah container dengan nama class yang bebas.. Berhubung gallery ini akan kita buat dengan CSS Flex, jadi kita ga perlu bingung mikirin banyak layer lagi didalamnya, cukup buat baris coding seperti ini :
<!--DISARANKAN MENGGUNAKAN GAMBAR YANG MEMPUNYAI UKURAN / RASIO YANG SAMA --> <div class="gallery"> <a href=""><img src="images/01.jpg"></a> <a href=""><img src="images/02.jpg"></a> <a href=""><img src="images/03.jpg"></a> <a href=""><img src="images/04.jpg"></a> <a href=""><img src="images/05.jpg"></a> <a href=""><img src="images/06.jpg"></a> <a href=""><img src="images/07.jpg"></a> <a href=""><img src="images/08.jpg"></a> <a href=""><img src="images/09.jpg"></a> <a href=""><img src="images/10.jpg"></a> <a href=""><img src="images/11.jpg"></a> <a href=""><img src="images/12.jpg"></a> <a href=""><img src="images/13.jpg"></a> <a href=""><img src="images/14.jpg"></a> <a href=""><img src="images/15.jpg"></a> </div>
Sekarang ke CSSnya,,
*{margin:0px auto;} /*CSS Reset*/ body{background:#efefef;} .gallery{ width:900px; background:#fff; box-shadow:0px 0px 5px #aaa; -moz-box-shadow:0px 0px 5px #aaa; -webkit-box-shadow:0px 0px 5px #aaa; display:-moz-flex; display:-webkit-flex; display:-o-flex; display:flex; flex-flow:row wrap; /*arah flex = row (kesamping), dan wrapping otomatis*/ -webkit-flex-flow:row wrap; -moz-flex-flow:row wrap; } .gallery a{ width:200px; height:120px; padding:10px; display:block; } .gallery img{ width:200px; /*lebar awal transisi*/ margin-left:0px; /*titik awal transisi*/ position: absolute; /*supaya posisi gambar ketika diarahkan kursor bisa diatur seenak jidat*/ transition:0.5s; /*durasi transisi yang diinginkan*/ -moz-transition:0.5s; -webkit-transition:0.5s; -o-transition:0.5s; -khtml-transition:0.5s; } .gallery a:hover img{ width:300px; margin-left:-50px; /*jumlah margin = lebar gambar baru dikurangi lebar gambar lama dibagi 2*/ z-index: 10; /*supaya gambar tidak ketutupan gambar lainnya*/ }
Dari baris CSS yang kita lihat diatas, layout dasarnya sangat dibantu kerapiannya oleh CSS Flex (buat browser yang support aja yah), selebihnya hanya mengatur transisi pada gambar didalamnya.