-->


CSS3 Box Resize Image Hover

Box Resize dalam tenik CSS3 adalah membuat image atau kotak gambar dari semula biasa dan ketika disentuh atau disorot mouse maka gambar itu akan membesar dengan pembesaran skala ala CSS3. Dalam trick CSS3 Box Resize Image Hover ini, setidaknya kita membutuhkan property scale (skala) dan box shadow (bayangan) dan radius (sudut lengkung). Skala itu akan memperbesar image dari semula, jadi ntar gambarnya menjadi lebih besar. Terus untuk bayangan, ntar kalo gambarnya disorot mouse, maka gambar itu akan berbayang, sedangkan untuk sudut lengkung, maka gambar yang udah kita sorot mouse akan menjadi melengkung, entah di sudut kiri atas, kanan atas, kiri bawah maupun kanan bawah. Hem, lumayan nggak tuh ntar jadinya, so buat apa lagi menunggu. Sekalian belajar dikit demi sedikit, ntar juga hafal dan bisa kok otak-atik CSS3 ini. Soale sangat mudah seh, apalagi udah ada etika atau pedoman dalam penulisan syntax di Edit HTML maupun di postingan / sidebar. Yups, sekarang kita kerjakan aja, mumpung lagi inget.

Masuk dulu di Edit HTML
Cari kode ini ]]></b:skin>
Letakkan CSS3 berikut persis diatasnya






<!-- Liat selengkapnya di 1001tawa.blogspot.com -->
<style type='text/css'>
.devilzhover img{
-webkit-transform:scale(0.5); /*Skala di Safari*/
-moz-transform:scale(0.5); /*Skala di Mozilla*/
-webkit-transition-duration: 0.5s; /*Durasi versi Safari*/
-moz-transition-duration: 0.5s; /*Durasi versi Mozilla*/
opacity: 0.7; /*Inisial opacity gambar*/
margin: 5px 5px 5px 5px; /*margin diantara gambar*/
padding:5px 5px 5px 5px; /*padding diantara gambar*/
}
.devilzhover img:hover{
-webkit-transform:scale(1.2); /*Skala diperbesar 1.1x dari semula*/
-moz-transform:scale(1.2); /*Skala diperbesar 1.1x dari semula*/
-webkit-box-shadow:0px 0px 20px #ff0000; /*Bayangan versi Safari*/
-moz-box-shadow:0px 0px 20px #ff0000; /*Bayangan versi Mozilla*/
box-shadow:0px 0px 20px #ff0000; /*Inisial bayangan*/
opacity: 1; /*Inisial opacity gambar*/
margin: 5px 5px 5px 5px; /*margin diantara gambar*/
padding:5px 5px 5px 5px; /*padding diantara gambar*/
-moz-border-radius-topleft:50px; /*Lengkung di Mozilla*/
-moz-border-radius-bottomright:50px; /*Lengkung di Mozilla*/
-webkit-border-radius-top-left:50px; /*Lengkung di Safari*/
-webkit-border-radius-bottom-right:50px; /*Lengkung di Safari*/
}
</style>
<!-- Liat selengkapnya di 1001tawa.blogspot.com -->

Itu udah aku kasih penjelasan langsung di belakang coding
Kalian bisa liat dan pahami satu persatu
Semoga

Terus masuk ke postingan atau sidebar
Kasih HTML berikut ini

<div class="devilzhover">
<img src="URL image kalian taruh disini" /></div>

Misal URL gambar itu adalah
http://contohgambar.com/file/gambar/contoh/inigambarnya.JPEG

Gimana, nggak bingung khan?
Semoga nggak dan semoga berhasil
Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Agan jadi Cuapers ke 0, CONGRATULATE !

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified