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.

27 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat