Mengganti Gambar Ketika Disentuh (Hover) – HTML CSS

345

Postingan kali ini akan menjelaskan tentang 2 hal yaitu “mengganti gambar (img) ketika hover” dan “mengganti gambar (background) ketika di hover” di HTML CSS, mari simak tutorialnya.

Mengganti Konten Gambar

Misalnya kamu ingin menampilkan gambar di website dalam sebuah kolom / pembungkus dan dapat berubah gambarnya ketika disentuh, tips-nya adalah tampilkan 2 gambar tapi kita sembunyikan salah satu (yang atas) ketika pointer mouse menyentuhnya. Begini caranya:

Pertama, silahkan siapkan dulu 2 gambar yang diinginkan kemudian samakan struktur kodenya seperti ini:

<div class="contohgambar">
  <img src="gambar1.jpg" class="gambar1">
  <img src="gambar2.jpg" class="gambar2">
</div>

Dengan struktur seperti ini tentu gambar masih berantakan karena menampilkan 2 gambar, kita perlu mengatur position realtiveabsolute. Masih ingat kan ? Kalo udah lupa tentang relative dan absolute, bisa klik disini untuk membacanya lagi.

Begini isi CSS dari kode diatas:

.contohgambar {
    position: relative;
    width: 50%;
    top: 0;
  }
  .contohgambar img {
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  .contohgambar .gambar2:hover {
    opacity: 0;
  }

Ya, kita atur pembungkusnya (div) sebagai relative dan isinya sebagai absolute. Dengan begini, gambar akan saling tindih dan hanya akan terlihat satu saja yaitu gambar (img) yang kita sisipkan kedua. Gambar ke-2 tersebut kita pudarkan sampai tidak terlihat (opacity: 0) ketika di hover, jadi seolah-olah ini mengganti gambar padahal sebetulnya kedua gambar sudah tampil dari awal hanya saja gambar paling atas (yang menimpa) disembunyikan ketika hover.

Save dan lihat hasilnya !

Catatan: Silahkan sesuaikan posisi atas (top) kiri (left) dan posisi lainnya jika diperlukan sesuai dengan situs web yang digunakan.

Perhatikan juga pada CSS img terdapat transition yang membuat transisi / animasi ketika terjadi hover, disini akan ease selama 1 detik sehingga terlihat menarik. Jika tidak ingin menggunakan transisi tinggal dihapus saja, atau bisa juga menggunakan kode seperti ini:

<img src="gambar1.jpg" onmouseover="this.src='gambar2.jpg';" onmouseout="this.src='gambar1.jpg';">

Ini adalah HTML Javascript yang artinya terdapat Javascript didalam HTML, kode ini akan terlihat lebih simple tapi untuk kustomisasinya perlu memahami sedikit tentang Javascript.

Mengganti Gambar Background

Ini yang lebih banyak digunakan, ketika hover suatu kolom yang memiliki background maka gambar background tersebut akan berubah gambarnya (tidak statis). Misalnya saya punya sebuah konten seperti ini:

<div class="container-fluid myprojects">
  <div class="container">
    <div class="col-sm-12 judul-myprojects text-center">
      <h1>My Projects</h1>
    </div>
    <div class="row">
      <div class="col-md-4 item-project">
        <a href="portfolio/portfolio1.html"><img src="media/image/test1.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test2.jpg" class="img-responsive"></a>
      </div>
      <div class="col-md-4 item-project">
        <a href=""><img src="media/image/test3.jpg" class="img-responsive"></a>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 text-center">
        <button class="btn btn-lg btn-default tombol-projects"><a href="pages/portfolio.html">Lihat Semua Projects</a></button>
      </div>
    </div>
  </div>
</div>

Perhatikan pada pembungkusnya, disitu terdapat class myprojects yang mana class ini akan dipanggil pada CSS untuk menampilkan gambar latar.

.myprojects {
  background: url(../media/image/bg/bg-myprojects.jpg);
  background-size: cover;
}

Ini masih 1 gambar latar saja, tidak akan berubah ketika kolom myprojects disentuh. Untuk menggantinya silahkan tambahkan style seperti ini:

.myprojects:hover {
   background: url(../media/image/bg/bghover1.jpg);
   background-size: cover;
}

Artinya ketika di hover, source (src) gambar akan berubah karena disini kita sisipkan source yang berbeda. Selain itu, kamu juga bisa sisipkan transisi didalamnya supaya terlihat lebih menarik ketika gambar latar berganti. Misalnya jadi seperti ini:

.myprojects {
   background: url(../media/image/bg/bg-myprojects.jpg);
   background-size: cover;
   -webkit-transition: 1s ease-in-out;
   -o-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   -ms-transition: 1s ease-in-out;
   transition: 1s ease-in-out;
}
.myprojects:hover {
   background: url(../media/image/bg/bghover1.jpg);
   background-size: cover;
   -webkit-transition: 1s ease-in-out;
   -o-transition: 1s ease-in-out;
   -moz-transition: 1s ease-in-out;
   -ms-transition: 1s ease-in-out;
   transition: 1s ease-in-out;
}

Silahkan sesuaikan transisi sesuai selera, ini hanya contoh saja.

Masih bingung ? Lihat video tutorialnya disini

Selamat mencoba !

Lihat Post Lainnya:
Komentar