Cara Membuat Efek Multiple Hover

23/12/2019    Risman Hakim    239     Website

Cara Membuat Efek Multiple Hover - Pernahkah kalian membuat hover dengan CSS ? pasti pernah yah.. dikemsempatan kali ini saya akan bagikan tutorial CSS tentang efek hover namun efek hover yang ditampilkan yaitu multi hover yang berbeda. Buat kalian yang peasaran dan ingin membuatnya, bisa kalian ikuti langkah - langkah Cara Membuat Efek Multiple Hover berikut ini.

Seperti biasa untuk membuat efek hover, kita harus menentukan objek atau elemen yang akan dikenai efeknya, dalam kasus ini saya akan menerapkan efeknya pada objek gambar. Silahkan kalian bisa siapkan gambarnya dan kalian bisa buat file index.html kemudian ketikan kode struktur sederhana HTML berikut ini.

<body>
    <ul class="wrapper">
      <li class="item">
        <a href="#">
            <img class="image" src="img.jpg" alt="Cougar"/>
            <div class="text">
                <div class="title-text">Dog</div>
                <div class="title-desc">The cougar, mountain lion, and puma are all the same animal. They are not considered "big cats" because they do not roar. </div>
            </div>
          </a>
      </li>
    </ul>
</body>

Setelah menentukan objek yang akan dikenai efek hover dan membuat struktur seperti diatas, langkah selanjutnya adalah membuat efek multi hover. Dimana efek hover yang ditampilkan adalah slide teks sekaligus sedikit perubahan rotasi gambar dan efek zoom. Silahkan kalian ketikan sintak CSS berikut ini.

<style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background: #f4f4f6;
    }
    .wrapper {
      margin: 15px auto;
      padding-top: 50px;
      text-align: center;
    }
    .item {
      position: relative;
      display: inline-block;
      height: 250px;
      width: 370px;
      margin: 10px;
      border-radius: 3px;
      overflow: hidden;
    }
    .image {
      height: 250px;
      width: 370px;
      transition: all 0.3s ease;
      transition-delay: 0.2s;
    }
    .text {
      position: relative;
      top: -43px;
      display: inline-block;
      width: 100%;
      height: 250px;
      padding: 10px 0;
      background-color: rgba(0, 0, 0, 0.5);
      font: 400 16px "Montserrat";
      color: #f1f0ea;
      transition: all 0.2s ease-in-out;
      border-radius: 5px;
    }
    .title-text {
      font-weight: 100;
      letter-spacing: 1.2px;
      font-size: 20px;
      font-family: "Roboto", sans-serif;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
      transition: all 0.4s ease;
    }
    .title-desc {
      position: relative;
      top: 0;
      height: 250px;
      width: 370px;
      padding: 10px 0px;
      font: 400 15px "Montserrat";
      text-align: center;
      line-height: 23px;
      letter-spacing: 0.4px;
      opacity: 0;
      transition: all 0.9s ease;
      transition-delay: 0.2s;
    }
    /** HOVER **/
    .item:hover .image {
      transform: scale(2.5) rotate(15deg);
    }
    .item:hover .text {
      top: -255px;
      background-color: rgba(0, 0, 0, 0.8);
    }
    .item:hover .title-text {
      font-weight: 700;
      padding-top: 10%;
      font-size: 30px;
      margin-bottom: -5px;
    }
    .item:hover .title-desc {
      opacity: 1;
    }
</style>

Setelah kalian ketikan semua sintak HTML dan CSS diatas, simpan filenya kemduian kalian bisa melihat hasil akhir efek hover yang dibuat pada browser masing - masing.

Baiklah, cukup sekian tutorial sederhana CSS tentang bagaimana Cara Membuat Efek Multiple Hover semoga tutorial ini bermanfaat, selamat mencoba dan sampai jumpa diartikel selanjutnya.

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More