Basa-basi lagi neh. hihihi.. Maklum nulis formalitas penjelasan secara teoritis malesin. Jadi ya, basa-basinya pake tebak-tebakan aja yah..
Kenapa jam selalu muter??? ayo kenapa?? kenapa?
Jawabannya:
Soalnya mencari angka 13 nggak ketemu-ketemu wee...
hihihi.. lucu gak? Gak lucuuuuuu!!
Udah ah, langsung ama temanya yaitu bikin... apa ya?! Uh, bingung nih kasih temanya. Langsung disorot saja gambarnya pake mouse, lantas lihat apa yang berubah.
1
2
Bagus gak? Tertarik gak? Pengen bikin gak? mau tahu cara bikinnya?
Cara bikinnya gini nih.
Kode CSS:
<style type="text/css">
.gambar{
position: relative;
z-index: 0;
}
.gambar:hover{
background-color: transparent;
z-index: 50;
}
.gambar span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.gambar span img{
border-width: 0;
padding: 2px;
}
.gambar:hover span{
visibility: visible;
top: 0;
left: 60px;
}
</style>
Kode HTML
<a class="gambar" href="#"> <img src="gambar1.jpg" width="100px" height="66px" border="0" /> <span> <img src="gambar1.jpg" /> <br /> 1 </span> </a>
<a class="gambar" href="#"> <img src="gambar2.jpg" width="100px" height="66px" border="0" /> <span> <img src="gambar2.jpg" /> <br /> 2 </span> </a>
Kode CSS dan HTML boleh kamu copas dan simpan di postingan yang kamu buat. Selamat mencoba, semoga berhasil. Eiiiit... jangan lupa tuh ama komentar kamu yah..
Catatan:
Kenapa jam selalu muter??? ayo kenapa?? kenapa?
Jawabannya:
Soalnya mencari angka 13 nggak ketemu-ketemu wee...
hihihi.. lucu gak? Gak lucuuuuuu!!
Udah ah, langsung ama temanya yaitu bikin... apa ya?! Uh, bingung nih kasih temanya. Langsung disorot saja gambarnya pake mouse, lantas lihat apa yang berubah.
1
2
Bagus gak? Tertarik gak? Pengen bikin gak? mau tahu cara bikinnya?
Cara bikinnya gini nih.
Kode CSS:
<style type="text/css">
.gambar{
position: relative;
z-index: 0;
}
.gambar:hover{
background-color: transparent;
z-index: 50;
}
.gambar span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.gambar span img{
border-width: 0;
padding: 2px;
}
.gambar:hover span{
visibility: visible;
top: 0;
left: 60px;
}
</style>
Kode HTML
<a class="gambar" href="#"> <img src="gambar1.jpg" width="100px" height="66px" border="0" /> <span> <img src="gambar1.jpg" /> <br /> 1 </span> </a>
<a class="gambar" href="#"> <img src="gambar2.jpg" width="100px" height="66px" border="0" /> <span> <img src="gambar2.jpg" /> <br /> 2 </span> </a>
Kode CSS dan HTML boleh kamu copas dan simpan di postingan yang kamu buat. Selamat mencoba, semoga berhasil. Eiiiit... jangan lupa tuh ama komentar kamu yah..
Catatan:
- Jika efek gambar digunakan untuk keseluruhan postingan copas kode CSS dan letakkan di design template pada (.post img, table.tr-caption-container) dengan mengganti kata gambar menjadi post
- Jika efek gambarnya gak jadi, jangan salahin saya ya. Hehehehe..
Ditulis Oleh: KanG piE
Info yang kamu baca adalah Efek Zoom Gambar Dengan CSS Di Blog dengan harapan bermanfaat untuk kamu. Silahkan kamu copas dan menyebarluaskan seluruh isi artikel ini dengan catatan menyebutkan
sebagai asal sumber Info ini.
Tidak ada komentar:
Posting Komentar