Cara Membuat Efek Hover Transisi

Cara Membuat Efek Hover Transisi - Pada artikel sebelumnya telah dibahas tutorial mengenai bagaimana Cara Membuat Efek Hover Mengubah Warna, pada artikel kali ini saya akan melanjutkan lagi tutorial yang masih membahas tentang efek hover, yang mana kali ini saya akan bagikan tutorial bagaimana Cara Membuat Efek Hover Transisi. Transisi merupakan suatu efek yang terdapat pada CSS yang bisa kita gunakan untuk membuat objek melakukan perubahan atau pergantian dari satu titik ke titik lainnya. Nah, berikut akan saya praktekan cara membuatnya.

Langkah 1 : Cara Membuat Efek Hover Transisi

Langkah pertama untuk membuat efek transisi adalah kita harus menentukan objek yang akan dikenai efek, dalam hal ini kita akan menerapkan efek transisi pada gambar, dimana akan terjadi perubahan warna background terhadap gambar yang disertai dengan efek transisi. Silahkan ketikan sintak HTML berikut sebagai struktur awalnya.

<body>
    <div class="wrapper">
      <img src="images.png">
      <div class="content">
        <div class="text"><strong>Halo, my name is jon...</strong></div>
      </div>
    </div>
</body>

Langkah 2 : Cara Membuat Efek Hover Transisi

Langkah berikutnya tentu kita akan buat efek hover transisi dengan sintak CSS yang mana kita akan gunakan properti transition CSS sebagai efeknya.

.wrapper {
  position: relative;
  width: 500px;
  margin: auto;
  background: tomato;
}

img {
  display: block;
  width: 500px;
}

.content {
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 500px;
  height:0;
  transition: all 1s cubic-bezier(0.815, 0.005, 0.18, 1.005);
  background-color: rgba(0, 35, 54, 0.6);
  background: rgba(0, 35, 54, 0.6);
  color: rgba(0, 35, 54, 0.6);
}

.wrapper:hover .content {
  bottom: 0;
  height: 100%;
}

.text {
  color: #eae2c3;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
}

Setelah sintak diatas telah kalian ketikan, silahkan simpan filenya kemudian untuk melihat hasilnya silahkan buka pada browser masing - masing. Maka ketika kita arahkan kursor terhadap gambar akan terjadi perubahan warna background pada gambar disertai efek transisi.

Baik, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Efek Hover Transisi, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

26 Agustus 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat