Cara Membuat Efek Multiple Hover

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.

23 Desember 2019

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