Cara memberi efek pada gambar dengan CSS

Sobat bloger dapat memberi efek pada gambar agar blog sobat lebih terlihat enak dilihat, salah satu nya adalah memberi kode css dibawah ini, kode ini berfungsi untuk memperbesar dan memberi efek shadow saat disorot mouse.

Coba sobat sorot gambar di bawah ini :

Berikut Kode CSS nya

<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 yang harus disertakan

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

Keterangan

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.