membuat slide keterangan gambar animasi

Kembali lagi membahas tentang kode css, Namun kali ini kita akan membuat slide keterangan gambar.
Sebuah gambar yang ada pada website tentu memiliki title atau keterangan untuk menjelaskan apa maksud gambar tersebut, tentu secara standar keterangan gambar hanya biasa2 saja.

pada trik ini kita akan membuat keterangan gambar keluar secara slide dari bawah gambar dengan animasi yang elegan dan halus.
untuk lebih jelasnya berikut ini contohnya.





Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.





Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.





Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.





Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.

nah..seperti itulah contohnya, pada contoh di atas ada 4 jenis slide yaitu slide keluar arah kanan,kiri,atas dan bawah.
anda bisa memilih slide mana yang anda suka.
ok sekarang lanjut ke cara membuatnya. seperti postingan sebelumnya yang kita butuhkan adalah kode css dan html .
berikut ini kode css nya:

<style>

.imagepluscontainer{
position: relative;
z-index: 1;
}

.imagepluscontainer 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;
}

.imagepluscontainer: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);
}

.imagepluscontainer 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;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer: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;
}

.imagepluscontainer 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;
}

.imagepluscontainer: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);
}

.imagepluscontainer 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;
}

.imagepluscontainer: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);
}


.imagepluscontainer 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;
}

.imagepluscontainer: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>
sekarang berikut ini kode htmlnya:

ini kode untuk slide yang pertama yaitu keterangan gambar keluar ke arah bawah.
<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>
ini kode untuk slide yang pertama yaitu keterangan gambar keluar ke arah kanan.

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc rightslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>
ini kode untuk slide yang pertama yaitu keterangan gambar keluar ke arah atas gambar.

<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc upslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>
ini kode untuk slide yang pertama yaitu keterangan gambar keluar ke arah kiri gambar.

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<div class="desc leftslide">
Capable of seating 50,000 spectators, the <a href="http://en.wikipedia.org/wiki/Colosseum">Colosseum</a> was used for gladiatorial contests and public spectacles such as executions.
</div>
</div>

Nah.. silahkan pilih slide mana yang anda suka.
lankahnya silahkan copy kode css dan letakkan di antara <head> kode css</head> pada blog atau website anda.
lalu untuk kode htmlnya sobat bisa pilih sendiri slide mana yang anda suka, cukup copy kode nya dan tempat kan di mana sobat suka.
trik ini memang banyak kelebihannya, selain animasinya yang keren, kita juga bisa membuat keterangan dan link arahan untuk gambar yang kita buat. di sini saya hanya menarahkan link ke wikipedia tentang  Colosseum , sobat juga bisa membuat banyak link dalam satu gambar. so kreatif aja deh..ehehe

cukup gampangkan, jika sobat bingung untuk trik ini silahkan komentar aja apanya yang membuat bingung.
yah..selesai deh , lumayan panjang juga ya postingan kali ini.
oy jangan lupa ya beri saran dan pendapatnya.
salam blogger untuk sobat semua.