Membuat Keterangan Hover Image Dengan Css3

Css3 Hover Caption Slide Effect
Gambar ini tidak ada hubungannya , hanya hiasan sajar

Membuat Keterangan Hover Image Dengan Css3 - Memberi keterangan pada gambar akan membantu para pembaca mengetahui apa maksud dari gambar yang ditampilkan . Selain itu fungsi dari Css hover Caption ini juga bisa ditampilkan semisal anda ingin membuat halaman galeri atau home page dengan gambar yang bertujuan untuk mengarahkan pembaca kepada link yang di inginkan .

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

Semoga artikel ini bermanfaat ... dan salam blogger ...