Cara Membuat Efek Hover Slide Card

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.

<body>
    <div class="container">
        <div class="card">
            <div class="box sub-box-1">
                <div class="content">
                    <img src="images/develop.png">
                    <h3>develop</h3>
                </div>
            </div>
            <div class="box sub-box-2">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box sub-box-1">
                <div class="content">
                    <img src="images/development.png">
                    <h3>development</h3>
                </div>
            </div>
            <div class="box sub-box-2">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                    <a href="#">Read More</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="box sub-box-1">
                <div class="content">
                    <img src="images/happiness.png">
                    <h3>happiness</h3>
                </div>
            </div>
            <div class="box sub-box-2">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
                        <a href="#">Read More</a>
                </div>
            </div>
        </div>
    </div>
</body>

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.

Cara Membuat Efek Hover Slide Card

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 :)

19 September 2019

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