Basa basi dulu yah. Asiknya ngebloging, ya kayak gini. Di samping kita bisa nulis apa yang mau ditulis entah berupa info, curhat, bikin cerpen, bikin kue dan bikin apa aja. Juga bisa utak-atik tampilan blog kita biar keliatan keren dikit.
Cuma mesti hati-hati sama lupa waktu. Masalahnya terlalu sering kita kebablasan sholat saking asiknya ngeblog. Kayak aku nih, pas udah waktunya shalat ee.. selalu saja dijawab bentar lagi, tanggung, belum selesai nih, akhirnya waktu yang dianggap sepele jadi bumerang nambah dosa. Jangan sampe yah.
Wuiih.. sok jadi ustad neh?! Ups.. bukan. Cuma, saling mengingatkan sesama sahabat klik. Karena setiap pribadi wajib hukumnya untuk saling mengingatkan baik itu orang awam terlebih-lebih orang berilmu. Nah kalo yang ngajarin ilmu itu tugasnya ulama, dai, ustazd atau yang punya ilmu gitu.
So.. Inget yaaaa! Biarpun ngeblog asyiiiiik, tapi sholat jangan ditinggaaaal!! okeee..
Langsung ya..
Supaya tahu efek gambar membesar yang kayak gimana. Silahkan pointer mousenya di dekatkan ke semua gambar di bawah ini, trus lihat perubahannya.
Nah udah tahukan efeknya. Banyak gambar yang disorot efek membesarnya ya di satu tempat aja. Gak pindah-pindah.
Pengen buat efek gambar yang kayak di atas buat mempercantik tampilan blog kamu. Nih aku kasih tahu cara bikinnya.
Silahkan copy paste kode CSS di bawah ini dan di simpan di antara <head> </head>
<style type="text/css">
.galeri{
position: relative;
}
.gambar img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.gambar:hover{
background-color: transparent;
}
.gambar:hover img{
border: 1px solid blue;
}
.gambar span{ /*CSS gambar membesar*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.gambar span img{ /*CSS gambar membesar*/
border-width: 0;
padding: 2px;
}
.gambar:hover span{ /*CSS gambar membesar*/
visibility: visible;
top: 0;
left: 230px; /*posisi efek membesar harus sejajar*/
z-index: 50;
}
</style>
Trus kode HTMLnya:
<div class="galeri">
<a class="gambar" href="#thumb"> <img src="gambar1.jpg" width="100px" height="66px" border="0" /> <span> <img src="gambar1.jpg" /> <br /> 1 <span> </a>
<a class="gambar" href="#thumb"> <img src="gambar2.jpg" width="100px" height="66px" border="0" /> <span><img src="gambar2.jpg" /> <br /> 2 <span> </a>
<a class="gambar" href="#thumb"> <img src="gambar3.jpg" width="100px" height="75px" border="0" /> <span> <img src="gambar3.jpg" /> <br /> 3 <span> </a>
<a class="gambar" href="#thumb"> <img src="gambar4.jpg" width="100px" height="70px" border="0" /> <span> <img src="gambar4.jpg" /> <br /> 4 <span> </a>
<div class="/galeri">
Nah, gitu aja deh. Silahkan dicoba buat mempercantik blog kamu. Ingaat.. ingaat..ingaat..! tulis ya komentar kamu.
Cuma mesti hati-hati sama lupa waktu. Masalahnya terlalu sering kita kebablasan sholat saking asiknya ngeblog. Kayak aku nih, pas udah waktunya shalat ee.. selalu saja dijawab bentar lagi, tanggung, belum selesai nih, akhirnya waktu yang dianggap sepele jadi bumerang nambah dosa. Jangan sampe yah.
Wuiih.. sok jadi ustad neh?! Ups.. bukan. Cuma, saling mengingatkan sesama sahabat klik. Karena setiap pribadi wajib hukumnya untuk saling mengingatkan baik itu orang awam terlebih-lebih orang berilmu. Nah kalo yang ngajarin ilmu itu tugasnya ulama, dai, ustazd atau yang punya ilmu gitu.
So.. Inget yaaaa! Biarpun ngeblog asyiiiiik, tapi sholat jangan ditinggaaaal!! okeee..
Langsung ya..
Supaya tahu efek gambar membesar yang kayak gimana. Silahkan pointer mousenya di dekatkan ke semua gambar di bawah ini, trus lihat perubahannya.
Nah udah tahukan efeknya. Banyak gambar yang disorot efek membesarnya ya di satu tempat aja. Gak pindah-pindah.
Pengen buat efek gambar yang kayak di atas buat mempercantik tampilan blog kamu. Nih aku kasih tahu cara bikinnya.
Silahkan copy paste kode CSS di bawah ini dan di simpan di antara <head> </head>
<style type="text/css">
.galeri{
position: relative;
}
.gambar img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.gambar:hover{
background-color: transparent;
}
.gambar:hover img{
border: 1px solid blue;
}
.gambar span{ /*CSS gambar membesar*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.gambar span img{ /*CSS gambar membesar*/
border-width: 0;
padding: 2px;
}
.gambar:hover span{ /*CSS gambar membesar*/
visibility: visible;
top: 0;
left: 230px; /*posisi efek membesar harus sejajar*/
z-index: 50;
}
</style>
Trus kode HTMLnya:
<div class="galeri">
<a class="gambar" href="#thumb"> <img src="gambar1.jpg" width="100px" height="66px" border="0" /> <span> <img src="gambar1.jpg" /> <br /> 1 <span> </a>
<a class="gambar" href="#thumb"> <img src="gambar2.jpg" width="100px" height="66px" border="0" /> <span><img src="gambar2.jpg" /> <br /> 2 <span> </a>
<a class="gambar" href="#thumb"> <img src="gambar3.jpg" width="100px" height="75px" border="0" /> <span> <img src="gambar3.jpg" /> <br /> 3 <span> </a>
<a class="gambar" href="#thumb"> <img src="gambar4.jpg" width="100px" height="70px" border="0" /> <span> <img src="gambar4.jpg" /> <br /> 4 <span> </a>
<div class="/galeri">
Nah, gitu aja deh. Silahkan dicoba buat mempercantik blog kamu. Ingaat.. ingaat..ingaat..! tulis ya komentar kamu.
Ditulis Oleh: KanG piE
Info yang kamu baca adalah Efek Galeri Gambar Membesar dengan CSS 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