Membuat Effect Hover Image dengan CSS

06/02/2018    Risman Hakim    633     Website

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

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