Cara Membuat Card Effect Hover

Dalam dunia desain web, terdapat banyak cara untuk memberikan efek menarik pada elemen kartu menggunakan HTML dan CSS. Salah satu efek yang populer adalah "card effect hover" atau efek hover pada kartu.

Untuk membuat efek ini, Anda dapat menggunakan kombinasi HTML dan CSS. Pertama, Anda perlu membuat struktur dasar kartu menggunakan elemen HTML, Kemudian, gunakan CSS untuk mengatur tampilan dan animasi saat pengguna mengarahkan kursor ke kartu.

Salah satu cara untuk menciptakan efek hover 3D adalah dengan menggunakan transformasi CSS seperti `rotate` atau `scale`. Dengan mengubah nilai-nilai transformasi ini saat pengguna melakukan hover pada kartu, Anda dapat menciptakan ilusi gerakan atau perubahan ukuran yang menarik.

Anda juga dapat mencari contoh kode di situs seperti CodePen untuk melihat berbagai macam card hover effects yang telah dibuat oleh desainer lain. Dengan mempelajari kode-kode tersebut, Anda dapat memahami cara membuat efek hover pada kartu dengan lebih baik.

Namun perlu diingat bahwa penting untuk menjaga keseimbangan antara estetika dan fungsionalitas dalam desain web. Pastikan bahwa efek hover yang Anda buat tidak mengganggu pengalaman pengguna dan tetap mudah digunakan.

Semoga penjelasan ini membantu Anda dalam memahami cara membuat card effect hover menggunakan HTML dan CSS. Selamat mencoba!

Untuk membuat card hover dengan HTML dan CSS, berikut adalah langkah-langkah yang dapat Anda ikuti:

File Index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <a href="https://www.mythrillfiction.com/the-dark-rider" alt="Mythrill" target="_blank">
        <div class="card">
            <div class="wrapper">
                  <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" />
            </div>
            <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" />
            <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character">
        </div>
    </a>

    <a href="https://www.mythrillfiction.com/force-mage" alt="Mythrill" target="_blank">
        <div class="card">
            <div class="wrapper">
                <img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" />
            </div>
            <img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" />
            <img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character"/>
        </div>
    </a>
</body>
</html>

File CSS :

:root {
    --card-height: 300px;
    --card-width: calc(var(--card-height) / 1.5);
}
* {
    box-sizing: border-box;
}
body{
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #191c29;
}
.card {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 36px;
    perspective: 2500px;
    margin: 0 50px;
}
.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wrapper {
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: -1;
}

.card:hover .wrapper {
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.wrapper::before,
.wrapper::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
}

.wrapper::before {
    top: 0;
    height: 100%;
    background-image: linear-gradient(
        to top,
        rgba(12, 13, 19, 0.5) 68%,
        rgba(12, 13, 19) 97%
    );
}

.wrapper::after {
    bottom:  0;
    opacity: 1;
    background-image: linear-gradient(
        to bottom,
        transparent 46%,
        rgba(12, 13, 19, 0.5) 68%,
        rgba(12, 13, 19) 97%
    );
}

.card::hover .wrapper::before,
.wrapper::after {
    opacity: 1;
}

.card::hover .wrapper::after {
    height: 120px;
}

.title {
    width: 100px;
    transition: transform 0.5s;
}

.card::hover .title {
    transform: translate3d(0%, -50px, 100px);
}

.character {
    width: 100%;
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
}

.card:hover .character {
    opacity: 1;
    transform: translate3d(0%, -30%, 100px);
}

HASILNYA :

Sumber code klick codepen

Cara Membuat Card Effect Hover | HTML dan CSS

Posting Komentar

Template Blogger Free Download | The Best

Contact form