Cara Membuat Efek Hover Overlay

Dalam sebuah tampilan web, efek dan animasi merupakan komponen yang sangat penting apabila kita ingin benar-benar menyuguhkan tampilan yang interaktif. Banyak sekali efek ataupun animasi yang bisa kita temukan pada setipa tampilan webiste dan tentu tiap-tiap website mempunyai efek dan animasi yang berbeda ataupun ciri khas dari masing-masing website, maka dari itu dalam membuat tampilan website tentu kita harus memperhatikan hal seperti itu.

Berbicara mengenai efek dan animasi pada tampilan website, berikut ini ada referensi efek yang bisa kalian pakai untuk menunjang tampilan website menjadi lebih menarik, yakni efek hover overlay. Berikut adalah langkah-langkah Cara Membuat Efek Hover Overlay.

Dalam kasus ini efek hover overlay akan diterapkan pada objek gambar, itu artinya ketika kursor diarahkan ke objek gambar akan terjadi sebuah perubahan berupa efek. Pada tahapan pembuatan nya pertama-tama kita akan buat struktur dengan kode HTML5 berikut.

<body>
    <div id="box">
      <div id="overlay">
        <span id="plus">+</span>
      </div>
    </div>
    <div id="box">
      <div id="overlay">
        <span id="plus">+</span>
      </div>
    </div>
</body>

Setelah membuat struktur HTMLnya, selanjutnya tahapan untuk mendesain tampilan, mulai dari layout, ukuran dan yang paling utama adalah membuat efek hover overlaynya, dengan kode CSS3.

body {background:#e7e7e7;}
#box {  
    width:300px;
    height:200px;
    box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    margin:5% auto 0 auto;
    background:url(http://new.fastllp.com/wp-content/uploads/2016/09/softfruit2-300x200.jpg);
    background-size:cover;
    border-radius:5px;
    overflow:hidden;
}

#overlay {  
    background:rgba(0,0,0,.75);
    text-align:center;
    padding:45px 0 66px 0;
    opacity:0;
    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;
}

#box:hover #overlay {opacity:1;}

#plus {  
    font-family:Helvetica;
    font-weight:900;
    color:rgba(255,255,255,.85);
    font-size:96px;
}

Pada kode CSS3 diatas silahkan kalian masukan objek berupa gambar pada bagian kode berikut.

background:url(http://new.fastllp.com/wp-content/uploads/2016/09/softfruit2-300x200.jpg);

Setelah semua kode HTML5 dan CSS3 telah diketikan, selanjutnya simpan filenya kemudian buka pada browser masing-masing dan lihat hasilnya, maka akan terlihat tampilan objek gambar dan kalau diarahkan kursor pada objek gambar akan terlihat efek overlaynya.

Cara-Membuat-Efek-Hover-Overlay

Bagaimana, cukup menarik bukan ? Baiklah cukup sekian tutorial dan referensi mengenai Cara Membuat Efek Hover Overlay. semoga bermanfaat dan selamat mencoba.

27 Agustus 2017

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 Seminar Java April 2024 di DUMET School
chat