Css3 Hover Caption Slide Effect
Gambar ini tidak ada hubungannya , hanya hiasan sajar
Gambar ini tidak ada hubungannya , hanya hiasan sajar
Dengan Css3 Caption Hover ini selain untuk memudahkan para pembaca mengenali tujaun dan maksud gambar tersebut juga akan menambah cantik gambar tersebut jika ditampilkan di dalam post .
Efek dari Css3 ini adalah slide dari kiri ke kanan dengan menunjukkan keterangan gambar yang telah anda siapkan sebelumnya .
Untuk demo bisa anda lihat dibagian bawah posting ini .
Oke , sekarang kita mulai saja caranya sebelum anda bingung
Untuk langkah pertama , simpan Css dibawah ini di dalam template anda diatas
]]></b:skin>
Css
#objek {
float: left;
margin: 10px;
overflow: hidden;
position: relative;
}
.ket {
width: 80%;
height: auto;
text-align: left;
padding: 5px 10px;
background: #000;
opacity: 0.6;
color: #fff;
line-height: 18px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
-webkit-border-radius: 0x 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-o-border-radius: 0px 25px 0px 0px;
border-radius: 0px 25px 0px 0px;
}
#objek .ket {
position: absolute;
bottom: 0;
left: 0;
margin-left: -1000px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#objek:hover {
-webkit-box-shadow:0px 0px 25px #000000;
-moz-box-shadow:0px 0px 25px #000000;
-o-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#objek:hover .ket {
margin-left: 0px;
}
Untuk menampilkan Gambarnya kita siapkan HTML mark up seperti dibawah ini
HTML
<div id="objek">
<img src="url gambar" />
<div class="ket">
<b>JUDUL GAMBAR</b><br />
keterangan/penjelasan dari gambar
</div>
</div>
Note :
Css diatas akan menampilkan Slide keterangan dari kiri ke kanan , untuk membuatnya menjadi slide dari bawah ke atas , kita tinggal merubah bagian ini pada css diatas .
Css Edited
#objek .ket {
margin-bottom: -300px;
}
Dan
#objek:hover .ket {
margin-bottom: 0px;
}
Selesai .
Demo :
Css Reflections
Cara membuat Css Reflections pada Image dan Text
Cara membuat Css Reflections pada Image dan Text
Semoga artikel ini bermanfaat ... dan salam blogger ...
3 comments
gan, tutornya work.
terima kasih banyak :)
Masama no
Keren...udah dicoba...terus berkarya bos
Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih