Membuat Effect Hover Image dengan CSS

Membuat Effect Hover Image dengan CSS - Belajar tentang CSS memang seakan tidak akan ada habisnya, apalagi buat kalian yang suka berkreasi membuat suatu desain web. Karena dengan kemampuan dan kemudahan yang diberikan CSS membuat developer desain web seakan - akan tidak bisa jauh dengan teknologi ini, apalagi jika dikombinasikan dengan jQuery membuat tampilan web akan semakin interaktif. Nah, buat kalian yang suka membuat desain baik berupa animasi, effect  dan lainnya pada kesempatan kali ini saya akan berbagi tutorial sederhana namun tetap menarik desainnya. Berikut tutorial Membuat Effect Hover Image dengan CSS.

Effect hover pada CSS merupakan salah satu effect favorit saya, karena dengan dengan effect ini kita bisa kreasikan objek apapun yang kita inginkan menjadi suatu effect yang cukup menarik. Kebetulan pada kasus berikut yang akan saya praktekan adalah effect pada sebuah gambar. Baiklah, kalian bisa mengikuti langkah - langkah berikut ini untuk praktek Membuat Effect Hover Image dengan CSS.

Langkah 1 : Membuat Effect Hover Image dengan CSS

Sebelum memulai pada penulisan sintak - sintak untuk membuat effect hover, silahkan persiapkan satu gambar bebas atau kalian bisa download gambarnya dibawah ini.

Membuat Effect Hover Image dengan CSS

Setelah itu, barulah pada langkah berikutnya yaitu penulisan sintak - sintak. Sintak pertama yang harus kalian katikan adalah struktur awal HTML untuk membuat effect hover.

<body>
    <div class="wrapper">
      <a href=""><img src="car.jpg"></a>
    </div>
</body>

Langkah 2 : Membuat Effect Hover Image dengan CSS

Selanjutnya, untuk membuat effect hover kita akan menuliskan sintak CSS, karena disinilah effect pada gambar akan dibuat yakni effect hovernya, silahkan ketikan sintak berikut ini dengan lengkap.

.wrapper {
    width: 500px;
    margin: auto;
}
.wrapper a {
    border: 5px solid transparent;
    width: 500px;
    float: left;
    position: relative;
    cursor: pointer;
}
.wrapper img {
    max-width: 100%;
    border-radius: 5px;
}
.wrapper a:before {
    transition: all .6s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333333;
    transform: scale(0);
    border-radius: 5px;
}
.wrapper a:hover:before {
    opacity: .2;
    transform: scale(1);
}
.wrapper a:after {
    transition: all .7s ease .2s;
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid #fff;
    border-radius: 5px;
    background: #252525;
    opacity: 0;
    transform: scale(0);
}
.wrapper a:hover:after {
    opacity: .35;
    transform: scale(1);
    border-radius: 5px;
}

Setelah semua sintak telah diketikan, kemudian simpan filenya dan kalian bisa lihat hasil akhir pada browser masing - masing. Jika kalian mengarahkan kursor terhadap gambar maka akan terjadi effect hoverMembuat Effect Hover Image dengan CSS

Baik, cukup sekian tutorial sederhana CSS tentang Membuat Effect Hover Image dengan CSS, semoga bermanfaat dan membantu buat kalian yang sedang dalam proses belajar mengenai HTML dan CSS serta menambah referensi dalam mendesain web. Baca juga artikel Membuat Efek Transition dengan CSS

6 Februari 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