Kamis, 18 September 2014

Membuat Floating Caption Gambar Artikel Blog

Membuat Floating Caption Gambar Artikel - Caption adalah sebuah keterangan yang terdapat dibagian bawah sebuah gambar dan biasanya caption ini ditulis secara manual untuk memberikan penjelasan pada gambar tersebut. Dan melalui artikel ini, saya akan sedikit memodifikasi caption tersebut dengan memberikan efek Hover, maksudnya, Sebuah keterangan pada gambar akan muncul jika gambar tersebut di sorot dengan pointer mouse

Dengan membuat floating caption atau efek hover tersebut maka akan menambah kesan yang menarik pada sebuah gambar dan juga akan mengurangi penggunaan tempat dalam menulis sebuah keterangan. Berikut beberapa bentuk contoh caption yang memberikan penjelasan pada sebuah gambar atau pada gambar artikel ini juga terdapat caption

Gambar dengan Caption manual

Membuat Animasi Caption Dengan Efek Hover Pada Gambar

Membuat Floating Caption Gambar Artikel: Pada gambar terdapat beberapa contoh tampilan dari sebuah gambar yang telah memiliki keterangan(Caption) pada gambar tersebut atau seperti yang terlihat pada gambar artikel ini


Gambar dengan Floating Caption
Silahkan sorot pada kedua gambar dibawah ini dengan menggunakan mouse

Membuat Floating Caption Gambar Artikel
  • Ini adalah Keterangan Gambar (caption) yang muncul jika gambar artikel di sorot oleh pointer mouse. Membuat caption ini tidak diperlukan kode script tapi cukup menggunakan kode CSS

Gambar dengan Floating Caption berfungsi untuk memberikan keterangan agar Gambar atau Artikel blog tidak di copy paste

Membuat Floating Caption Gambar Artikel
  • Dilarang Keras Menyalin Gambar atua Artikel ini Dalam Bentuk dan Dengan Cara Apapun Tanpa Seizin dari Penulis

Bagaimana tertarik untuk membuat floating caption gambar artikel blog tersebut? Berikut kode CSS untuk membuat floating caption seperti demo diatas

.gbr_img {
width:500px;
height:274px;
overflow:hidden;
}
.gbr_img img {
width:100%;
}
.gbr_img .caption {
width:100%;
height:125%;
margin-top:-99%;
padding:1em 0;
position:relative;
z-index:2;
}
.gbr_img .caption ul {
list-style:none;
float:left;
width:100%;
padding:0;
margin:100% 0;
}
.gbr_img .caption ul li {
display:block;
float:left;
padding:10px;
text-align:left;
color:transparent;
background:#ecf0f1;
box-shadow: inset 0 2px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.4);
transition:transform .4s ease .5s, opacity .25s ease .5s;
transform:translateZ(0);
opacity:0;
}
.gbr_img .caption ul li span {
color:#444444;
font-size:11px;
line-height:1;
}
.gbr_img ul li:hover span {
color:#ecf0f1;
}
.gbr_img:hover ul li {
opacity:1;
transform:translateY(-11.5em) translateZ(0);
}
.gbr_img ul li:hover {
background:#2c3e50;}

Kode HTML
<div class="gbr_img">
  <img src="ganti-dengan-url-gambar-anda.png" />
  <div class="caption">
    <ul>
      <li><span>Tulis Keterangan Disini</span></li>
    </ul>
  </div>
</div>

Mudah bukan? Silahkan jika ingin membuat floating caption pada gambar artikel blog Anda agar menjadi lebih menarik. Cara pasangnya bagaimana? Sesuaikan saja kode dengan kode CSS gambar artikel yang ada pada kode template blog Anda :)

Membuat Floating Caption Gambar Artikel Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

7 komentar:

  1. wah jadi tambah keren ya buk gambar posting nya, hampir mirip dengan gambar/foto di situs berita nasional :)

    BalasHapus
    Balasan
    1. idenya dari okezone n tribunnews mbak Wahyu :D

      Hapus
  2. Keren juga idenya mbak Ana :-bd dengan begitu tampilannya lebih rapih :)

    BalasHapus
    Balasan
    1. iya mas, yang ngajarin kodenya kan mas Adhy :) saya belajar banyak dari blognya mas Adhy.. :)

      Hapus
  3. Wah mbak ana ternyata akrab banget ya sama kode2 ... bisa belajar gratis nih sama mbak An nih hehe

    BalasHapus
  4. bisa seperti itu, mantep banget mbak
    trimakasih triknya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia