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.
Share this article :
+
Previous
Next Post »

Facebook Komentar

0 Komentar untuk "Cara memberi efek pada gambar dengan CSS"

Silahkan berikan komentar ,saran, dan kritik
Kami sangat berterimakasih atas partisipasi anda :)

Terima Kasih Sudah Berkomentar
 
Copyright © 2011-2015 WIRA-7 - All Rights Reserved
| Proudly powered by Blogger
Support By. Kunci Dunia
Back To Top