Cara Membuat Animasi Hover dengan CSS3

Cara Membuat Animasi Hover dengan CSS3 - Animasi pada tampilan website sangatlah dianjurkan penggunaan nya, karena dengan animasi membuat tampilan website akan semakin menarik dan tidak bosan untuk dilihat. Saat ini banyak sekali animasi yang bisa kita buat dengan mengguanakan berbagai bahasa program, Kali ini saya akan berbagi tutorial yang berhubungan dengan animasi yaitu bagaimana Cara Membuat Animasi Hover dengan CSS3. Animasi hover sangat populer sekali karena dengan hanya menggunakan sintak CSS3 kita sudah bisa membuat animasi hover. Baiklah berikut akan saya praktekan Cara Membuat Animasi Hover dengan CSS3.

Langkah 1 : Cara Membuat Animasi Hover dengan CSS3

Pada kasus ini kita akan membuat animasi pada sebuah gambar sebagai objeknya, maka dari itu silahkan kalian persiapkan satu buah gambar bebas atau bisa gunakan gambar berikut ini.

Cara Membuat Animasi Hover dengan CSS3

Setelah gambar tersedia, kita mulai dengan membuat struktur HTML sederhana untuk menampilkan gambar seperti berikut.

<body>
    <div id="wrapper">
        <div class="box">
          <img src="image.jpeg"/>
          <div class="caption">
            <h3>- Your Caption -</h3>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit."</p>
          </div>
          <a href="#"></a>
        </div>
    </div>
</body>

Langkah 2 : Cara Membuat Animasi Hover dengan CSS3

Setelah membuat struktur seperti diatas dan gambar sudah tampil, kita lanjutkan untuk membuat animasi hovernya. Tentu animasi yang akan kita buat dengan menggunakan CSS3, silahkan kalian ketikan sintak CSS3 untuk membuat animasi hovernya.

@import url('https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister');
body {
    color: #ffffff;
    font-family: 'Love Ya Like A Sister', cursive;
}
#wrapper {
    width: 400px;
    padding: 10px;
    margin: auto;
}
.box {
    position: relative;
    overflow: hidden;
    margin: 10px 1%;
    max-width: 420px;
    line-height: 1.4em;
    font-size: 16px;
    border-radius: 20px 20px;
}
.box * {
    box-sizing: border-box;
    transition: all 0.50s ease;
}
.box img {
    vertical-align: top;
}
.box .caption {
    position: absolute;
    top: calc(77%);
    background-color: #25CCF7;
    padding: 15px 25px 65px;
}
.box .caption:before {
    position: absolute;
    content: '';
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: linear-gradient(to bottom, transparent 0%, #25CCF7 100%);
}
.box h3 {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 35px;
}
.box p {
    opacity: 0.9;
    font-style: italic;
}
.box:hover .caption {
    top: 80px;
}

Setelah semua sintak telah diketikan, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, ketika kalian arahkan kursor akan terjadi animasi sederhana pada objek gambarnya. Selesai

Cara Membuat Animasi Hover dengan CSS3

Bagaimana, cukup menarik bukan animasi yang ditampilkan ? Baiklah, cukup sekian tutorial mengenai bagaimana Cara Membuat Animasi Hover dengan CSS3, semoga bisa bermanfaat dan selamat mencoba :)

15 Mei 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