Membuat Hide Show Caption Gambar

Membuat Hide Show Caption Gambar - Hallo semuanya, saya ingin memberikan tips dan trik tentang cara membuat hide show caption pada gambar, di mana biasanya kita melihat gambar dan kemudian ada teks yang di dalam gambar tersebut, atau konten apa pun itu, di sini kita akan melakukannya dengan cara yang sangat mudah, dan kita akan memberikan beberapa efek animasi untuk mempercantiknya.

Pada artikel kali ini, dengan sedikit pembahasan di atas, kita akan belajar cara membuat hide show caption pada gambar, kita akan menambahkan animasi, Jadi, apa yang akan kita lakukan adalah menampilkan sebuah gambar, dimana ketika kita melakukan hover diatas gambar tersebut maka akan muncul caption yang awalnya tidak terlihat. Kurang lebih penjelasan singkatnya seperti itu. Mari sekarang kita coba buat degnan cara yang sangat sederhana

Struktur HTML

Pada kali ini kita akan menggunakan bootstrap untuk membuat struktur tampilan halaman

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="background">
        <h1 class="text-center">Membuat Hide Show Caption Gambar</h1>
        <div class="backgroundGambar d-flex">
          <div class="tempatText text-center align-self-center">Caption Gambar</div>
        </div>
      </div>
    </div>
  </div>
</div>

Style CSS

Selanjutnya kita akan membuat style css yang akan digunakan untuk memanipulasi caption yang ada pada gambar

.backgroundGambar{
      background: url(https://www.w3schools.com/w3css/img_lights.jpg);
      width: 100%;
      height: 650px;
      background-size: cover;
      position: relative;
    }
    .tempatText{
      position: absolute;
      width: 100%;
      bottom: 0;
      padding: 40px;
      background-color: rgba(52, 73, 94,0.5);
      color: #fff;
      font-size: 35px;
      display: none;
    }

Kode JQuery

Pada kali ini kita akan membutuhkan kode JQuery dan memanfaatkan method slideToggle yang dimiliki JQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
 $(document).ready(function(){
    $(".backgroundGambar").hover(function(){
      $(".tempatText").slideToggle("slow")
    })
  })
</script>

Dengan kode diatas kita menggunakan trigger event hover untuk memanggil fungsi slideToggle yang memiliki fungsi utama yaitu memberikan efek slide saat menyembunyikan elemen atau menampilkan elemen tersebut. Baiklah, saya kita itu saja yang kita bahas kali ini yaitu tentang membuat show hide caption gambar menggunakan jquery. sampai jumpa di artikel lainnya, terima kasih.