Cara menggunakan card slider html css

Cara Membuat Efek Hover Slide Card - CSS merupakan bahasa cascading style sheet yang saat ini sudah sangat populer sekali penggunaan nya bahkan banyak sekali framework - framework yang dibuat dengan CSS, sebut saja bootstrap, materialize dan lain sebagainya. Namun pada pembahasan ini saya tidak akan membahas frameworknya namun tentang membuat efek dengan memanfaatkan CSS sepenuhnya, efek yang akan saya bahas kali ini adalah hover slide card. Buat kalian yang penasaran dan ingin mencoba membuatnya simak langkah - langkahnya berikut ini.

1. Membuat file index.html

Langkah pertama silahkan buatlah satu file index.html, kemudian ketikan kode HTML berikut untuk membuat struktur awal desain card. Jangan lupa untuk mengisikan gambar pada tag img src.

develop

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.

development

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.

happiness

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.

2. Membuat file style.css

Langkah selanjutnya adalah mendesain card dan membuat efek hover slide dengan memanfaatkan properti - properti CSS, karena lumayan banyak kode nya jadi silahkan kalian bisa ketikan kode CSS nya berikut ini.

    @import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');
    body{
        margin: 0;
        padding: 0;
        min-height: 100vh;
        background: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Manjari', sans-serif;
    }

    .container{
        width: 1000px;
        position: relative;
        display: flex;
        justify-content: space-between;
    }

    .card{
        position: relative;
    }

    .box{
        width: 300px;
        height: 200px;
        transition: 0.5s;
    }

    .box.sub-box-1{
        position: relative;
        background: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        transform: translateY(100px);
    }

    .card:hover .box.sub-box-1{
        background: #3CB5B5;
        transform: translateY(0);
    }

    .box.sub-box-1 .content{
        opacity: 0.2;
        transition: 0.5s;
    }

    .card:hover .box.sub-box-1 .content{
        opacity: 1;
    }

    .box.sub-box-1 .content img{
        max-width: 100px;
    }

    .box.sub-box-1 .content h3{
        margin: 10px 0 0;
        padding: 0;
        color: #fff;
        text-align: center;
        font-size: 1.5em;
    }

    .box.sub-box-2{
        background: #fff;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 10px 5px rgba(0, 0, 0, 0.8);
        transform: translateY(-100px);
    }

    .card:hover .box.sub-box-2{
        transform: translateY(0);
    }

    .content a{
        margin-top: 20px;
        text-decoration: none;
        color: #333;
        border: 1px solid #333;
        padding: 10px;
    }

    .box.sub-box-2 .content a:hover{
        background: #3CB5B5;
        border: 1px solid #3CB5B5;
        color: #fff;
    }

Pastikan file style.css telah diload di file HTML.

Setelah semua kode HTML dan CSS telah diketikan, silahkan simpan kembali kemudian kalian bisa buka pada browser untuk melihat hasil akhirnya, maka tampilannya akan terlihat seperti gamabr berikut.

Bagaimana, cukup menarik bukan efek yang ditampilkan ? waloupun hanya dengan CSS tetapi desain dan efek yang dihasilkan cukup menarik. Baiklah saya cukupkan tutorial Cara Membuat Efek Hover Slide Card, semoga bermanfaat dan sampai jumpa ditutorial selanjutnya :)