January 20, 2017

Belajar Membuat Caption Untuk Gambar Posting Efek Slide

Belajar Membuat Caption Untuk Gambar Posting Efek Slide

Summary : cara membuat Caption pada gambar posting dengan efek over mouse.

Caption merupakan deskripsi gambar yang tujuannya untuk menjelaskan gambaran secara umum agar mudah dimengerti. Tampilan caption secara umumnya berada dibawah gambar. Dengan metode trik CSS, caption dapat dimodifikasi sehingga kelihatan lebih menarik. Banyak sekali tutorial dari para master CSS yang memposting tentang captions, salah satu diantaranya yang selalu menjadi rujukan adalah css-tricks.com.

Cara membuat Caption dengan efek slide ini tutorialnya di ambil dari css-triks hanya untuk media belajar. Penggunaan-nya masih bersifat manual, namun anda bisa mengembangkan-nya dengan javascript ataupun dengan jquery.

langkahnya copy css dibawah ini, kemudian taruh diatas </head>

figure {
  display: block;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 0 20px 20px 0;
}
figcaption {
  position: absolute;
  background: black;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
}
figure:hover figcaption {
  opacity: 1;
}
figure:before {
  content: "?";
  position: absolute;
  font-weight: 800;
  background: black;
  background: rgba(255,255,255,0.75);
  text-shadow: 0 0 5px white;
  color: black;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -moz-transition: all 0.6s ease;
  opacity: 0.75;
}
figure:hover:before {
  opacity: 0;
}
.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }
.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }
.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
Untuk kode yang berwarna dipakai salah satu saja.

Penerapan pada gambar, ketika mengaploud sebuah gambar kodenya dalam bentuk HTML seperti dibawah ini

<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-FHnO0ElqpEQ/WIIQ02wJwqI/AAAAAAAAAHQ/WthqJerkYa0sooobPB-t9Z8niWlSncWAwCEw/s1600/caption.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://2.bp.blogspot.com/-FHnO0ElqpEQ/WIIQ02wJwqI/AAAAAAAAAHQ/WthqJerkYa0sooobPB-t9Z8niWlSncWAwCEw/s320/caption.jpg" width="320" /></a></div>
<div style="text-align: justify;">
</div>
Tanda yang berwarna merah kita ganti dengan kode <figure class="cap-left">, untuk tanda kuning kita ganti dengan alt="misalnya gambar caption", sedangkan yang berwarna biru kita ganti dengan kode

<figcaption class="from-left">
  Disi dengan keterangan gambar
 </figcaption>
</figure>
Selesai, kembali dalam mode compose dan teruskan postngan anda. Semoga berhasil.
Sekianlah artikel Belajar Membuat Caption Untuk Gambar Posting Efek Slide kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Belajar Membuat Caption Untuk Gambar Posting Efek Slide dengan alamat link http://www.wkwkwk.net/2017/01/belajar-membuat-caption-untuk-gambar.html

No comments:

Post a Comment