membuat galeri foto efek hover dengan css

membuat galeri foto efek hover dengan css. seperti sebelumnya saya pernah posting dengan judul hampir sama yaitu membuat galeri foto dengan css, namun kali ini kita sedikit memberikan efek animasi hover nya.

trik ini sendiri sangat mudah untuk di terapkan dalam sebuah website dan blog.untuk penggunaannya sendiri itu tergantung anda.

untuk jelasnya , berikut contoh live demonya:







ok.. itulah contoh sederhana galeri foto yang akan kita buat . itu contoh standarnya, dan jika anda mau edit2 untuk memaksimalkan juga bisa.
sekarang lanjut ke cara membuatnya.
1. Letakkan kode css berikut ini di atas </head> pada blog atau website anda.

<style type="text/css">

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

</style>
2.Jika sudah silahkan simpan template anda. selanjutnya ke penerapan galeri pada website dan blog.
3. yang harus di perhatikan pada kode berikut ini adalah kode yang tersisip pada <div>
jika bingung lihat postingan ini : penerapan css dengan html

berikut ini kode htmlnya:
<div class="hovergallery">
<img align="right" src="https://lh6.googleusercontent.com/-wj12q-19RcQ/T52QbXlHoiI/AAAAAAAACIg/EPFT6Ii9fRk/s298/lumba-lumba1.jpg" />
<img src="https://lh6.googleusercontent.com/-p5zFwJV0BB8/T51wayz9P6I/AAAAAAAACHc/v-HNAwPQ1C4/s512/el-gordo.jpg" />
<img align="right" src="https://lh3.googleusercontent.com/-kfb_GbEsfG4/T51zcenodaI/AAAAAAAACHo/crBvpkHGgBE/s500/bulan%2520unik.jpg" />
<img src="https://lh3.googleusercontent.com/-5wZ5iCxWIZY/T55kj8WdmjI/AAAAAAAACKg/pxDR8IglGQk/s320/batmobile.jpg" />
<img align="right" src="https://lh3.googleusercontent.com/-NVpr6EwLFa0/T5_xrLafosI/AAAAAAAACN4/IX_Cdrn36Ww/s400/bauh%2520apel%2520unik.jpg" />
<img src="https://lh5.googleusercontent.com/-Q6_65c7OLb0/T5_yKzo-60I/AAAAAAAACOQ/rSRujqB3_9A/s360/buah%2520anggur%2520unik.jpg" /></div>

pada kode yang saya beri warna merah, itu adalah class css yang kita buat tadi, jadi jika anda mau membuat galeri cukup anda membuat sebuah div di antara foto-foto pada blog atau website anda.
contoh:
<div class="hovergallery">
 di sini  area foto anda.
</div>


anda juga bisa meletakkan div pembuka di bawah <body>
lalu letakkan div penutup di atas </body> jadi foto di blog atau website anda otomatis memiliki efek hover seperti contoh di atas.


sekian untuk postingan kali ini, nantikan trik selanjutnya,dan jangan lupa saran dan pendapatnya.
terima kasih .