Memberi Effek pada Gambar ketika Disorot

Kita bisa memberikan efek pada gambar ketika kita mengarahkan mouse pada gambar tersebut. Salah satunya dengan memperbesar ukuran gambar atau memberinya efek bayangan.

Berikut Kode CSS

<style type="text/css">

.gambarsorot img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.8;
margin: 0 10px 5px 0;
}
.gambarsorot img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px blue;
-webkit-box-shadow:0px 0px 30px blue;
-moz-box-shadow:0px 0px 30px blue;
opacity: 1;
}

</style>

Kode HTML

<div class="gambarsorot">
<img src="url gambar1" />
<img src="url gambar2" />
<img src="url gambar3" />
</div>

.
gambarsorot img saat gambar belum disorot
gambarsorot img:hover saat gambar sedang disorot
scale untuk mengatur ukuran gambar gambar jika scale (1) maka gambar sama seperti ukuran aslinya. Jika scale (0.5) maka gambar setengah ukuran aslinya.
margin untuk mengatur jarak gambar. Formatnya margin (atas, kanan, bawah, kiri)
opacity untuk mengatur pudar terangnya gambar, rentangnya 0 - 1.
URL gambar diganti dengan lokasi gambar yang ingin anda tampilkan.