Menambahkan efek zoom dan efek shadow pada gambar dengan CSS3

Saya akan berbagi trik simple/sederhana namun sangat berguna bagi pembaca setia blog wawasan spiritual dan blogging. Trik sederhana ini hanya  membuat atau menambahkan efek zoom dan efek bayangan pada gambar dengan CSS. Anda dapat menerapkan trik ini khusus pada gambar yang akan membuat blog terkesan lebih atraktif. Jika Anda tertarik untuk menambahkan efek ini di blog atau pada postingan, sangat mudah, cukup ikuti langkah-langkah berikut:

(LIVE DEMO) Arahkan mouse anda ke gambar..

PENERAPAN:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML

• Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan pencarian
• Berikutnya pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin> 

.BS-Zoom img{ -webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/ -moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/ -o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla Animation duration*/ -o-transition-duration: 0.5s; /*Opera Animation duration*/ opacity: 0.5; margin: 0 10px 5px 0; } .BS-Zoom img:hover{ -webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/ box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; opacity: 1; }

• Simpan template

BAGAIMANA CARA MENGGUNAKANNYA?

Ketika Anda ingin menambahkan efek ini, hanya menambahkan potongan kode berikut:

<div class="BS-Zoom">
<img src="URL Gambar disini" />
</div>

Silahkan Ganti URL Gambar dengan URL gambar anda....

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 09.58