Cara Membuat Animasi Hover dengan CSS3

15/05/2018    Risman Hakim    273     Website

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 :)

Artikel, Web Design, HTML CSS, website

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