Efek Keterangan Atau Deskripsi Gambar Dengan CSS di Blog

Hai Sahabat klik Jumpa lagi nih di postingan aku ama temanya yang efek-efek pake CSS.

Nah ali ini gambarnya menampilkan efek keterangan atau deskripsi singkat gambar yang disorotnya. Seperti apa efek perubahan yang terlihat silahkan pointer mousenya di letakkan di gambar. Dan kamu lihat hasilnya.

Gambar ini menampilkan Efek keterangan atau deskripsi di bawah gambar

Gambar ini menampilkan Efek keterangan atau deskripsi di sebelah kanan gambar

Gambar ini menampilkan Efek keterangan atau deskripsi di atas gambar

Gambar ini menampilkan Efek keterangan atau deskripsi di sebelah kiri gambar

Udah tahukan tampilannya. Kalo kamu pengen buat yang kayak di atas urutan bikinnya hampir sama dan gak ada bedanya. Cuma kode CSS dan HTMLnya aja yang beda jadi gak usah aku kasih tahu urutan cara bikinnya.

Silahkan kamu COPAS kodenya.

Kode CSS
<style>
.gambar{
position: relative;
z-index: 1;
}
.gambar img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.gambar:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.gambar div.desc{
position: absolute;
width: 90%;
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: white;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0;
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.gambar div.desc a{
color: white;
}
.gambar:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}
.gambar div.rightslide{
width: 150px;
top:15px;
right:0;
left:auto;
bottom:auto;
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}
.gambar:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.gambar div.leftslide{
width: 150px;
top:15px;
left:0;
bottom:auto;
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}
.gambar:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}
.gambar div.upslide{
top:0;
bottom:auto;
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.gambar:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}
</style>

Kode HTML
<div class="gambar" style="width:263px; height:199px; z-index:2">
<img src="link url.jpeg" />
<div class="desc"> Gambar ini menampilkan Efek keterangan atau deskripsi di sebelah bawah gambar </div>
</div>

<div class="gambar" style="width:263px; height:199px;">
<img src="link url.jpeg" />
<div class="desc rightslide"> Gambar ini menampilkan Efek keterangan atau deskripsi di sebelah kanan gambar </div>
</div>

<div class="gambar" style="width:263px; height:199px">
<img src="link url.jpeg" />
<div class="desc upslide"> Gambar ini menampilkan Efek keterangan atau deskripsi di sebelah atas gambar </div>
</div>

<div class="gambar" style="width:263px; height:199px;">
<img src="link url.jpeg" />
<div class="desc leftslide"> Gambar ini menampilkan Efek keterangan atau deskripsi di sebelah kiri gambar </div>
</div>

Gitu aja, selamat berkreasi dan jangan lupa komentar kamu ditulis yah... Okeeee...

Ditulis Oleh: KanG piE

Info yang kamu baca adalah Efek Keterangan Atau Deskripsi Gambar Dengan CSS di Blog 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-keterangan-atau-deskripsi-gambar.html" target="_blank">Efek Keterangan Atau Deskripsi Gambar Dengan CSS di Blog</a> sebagai asal sumber Info ini.

Sahabat KLIK