Efek Gambar Membesar Dengan CSS

Basa-basi yang gak bakalan basi, aku cerita dikit yah.

Di jalan macet total aku kebelet pipis. Kebetulan Toilet umum deket banget, tanpa pikir panjang aku menerobos jalanan macet menuju toilet. Di dinding toilet aku tercenung melihat coretan tangan usil..
Yang baca tulisan ini anjing.
Dibawahnya bertulis spidol warna hitem.
Babi... gwe udah terlanjur baca duluan tahu.
Dibawahnya lagi bertulis spidol warna merah..
Eh, eh, anjing ama babi jangan ribut-ribut, damai kenapa...
hihihi... gitu aja ceritanya.

Silahkan pointer mouse anda didekatkan pada gambar di bawah ini. Trus lihat deh hasilnya.

Gimana? Suka ama efek membesar di atas? hooooooh...!!!
Ssttt.. Jangan keras-keras, entar ngompol di celana hihihiii...
Nih cara bikinnya:

>> Untuk Postingan atau widget tertentu cara buatnya. Kamu Copas kode-kode di bawah ini:
Kode CSS
<style type="text/css">
#Besar {
border:none;
max-width:560px;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
#Besar:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
</style>

Kode HTML
<div id="Besar">
<div class="hover"> <a href=" url link gambar" target="_blank"> <img src="url link gambar.jpg" width="100" height="100"/> </a>
</div>
</div>

Lantas
>> Jika efek membesar gambar dibuat untuk keseluruhan postingan/template design. Kode CSS-nya
.post img, table.tr-caption-container {
border:none;
max-width:560px;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}.

Urutan membuatnya:
Login dasbor blogger >> design template dan klik expand template designnya >> cari kode (.post img, table.tr-caption-container) di bagian css post dengan menekan CTRL F dan letakkan kode CSS >> SAVE
Gitu aja deh.
Silahkan dicoba, lihat hasilnya, lantas tulis komentar kamu di bawah ini. Okeeeeee...

Ditulis Oleh: KanG piE

Info yang kamu baca adalah Efek Gambar Membesar Dengan CSS dengan harapan bermanfaat untuk kamu. Silahkan kamu copas dan menyebarluaskan seluruh isi artikel ini dengan catatan menyebutkan <a href="http://sahabat-klik.blogspot.com/2012/10/efek-gambar-membesar-dengan-css.html" target="_blank">Efek Gambar Membesar Dengan CSS</a> sebagai asal sumber Info ini.

Sahabat KLIK