HTML AND CSS, YouTube

Product Card Hover effects

Product-Card-Hover-effects

Coding BD given Product Card Hover effects. You can create a responsive gallery using flexbox. We created a product card html css responsive. It is the most important part Of css effects. We have given more importance to responsive product gallery. They used pure css effects. because they need highly effective effects. if you are interested our work please subscribe to our channel. Thank you so much.

Product Card Hover effects
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Card Hover effects</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="box box__custom">
                <a href="#" class="button button-view">Quick View</a>
                <a href="#" class="button button-card">Add To Card</a>
                <div class="img">🍇</div>
                <h2 class="subtitle">Grapes</h2>
                <p>A grape is a fruit, botanically a berry, of the deciduous woody vines of the flowering plant genus Vitis. Grapes</p>
                <h3 class="tag">$ 40 /kg</h3>
            </div>
            <div class="box box__custom">
                <a href="#" class="button button-view">Quick View</a>
                <a href="#" class="button button-card">Add To Card</a>
                <div class="img">🍈 </div>
                <h2 class="subtitle">Melon</h2>
                <p>A grape is a fruit, botanically a berry, of the deciduous woody vines of the flowering plant genus Vitis. Grapes</p>
                <h3 class="tag">$ 30 /kg</h3>
            </div>
            <div class="box box__custom">
                <a href="#" class="button button-view">Quick View</a>
                <a href="#" class="button button-card">Add To Card</a>
                <div class="img">🍉</div>
                <h2 class="subtitle">WaterMelon</h2>
                <p>A grape is a fruit, botanically a berry, of the deciduous woody vines of the flowering plant genus Vitis. Grapes</p>
                <h3 class="tag">$ 50 /kg</h3>
            </div>
        </div>
    </div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #F5F5F5;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 1080px;
}

.row{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.box {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 1px rgb(10 10 10 / 2%);
    color: #4a4a4a;
    display: block;
    padding: 1.25rem;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.box__custom{
    width: 33%;
    margin: 0 10px;
    padding: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1em 2em rgb(0 0 0 / 5%);
    background: #fff;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.box__custom:hover{
    box-shadow: 0px 0px 40px 5px rgba(0,0,0,0.2);
    cursor: pointer;
}

.box__custom .img{
    font-size: 3rem;
    transition: all 0.4s;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-backface-visibility: hidden;
}

.box__custom:hover .img{
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
}

.box__custom .subtitle{
    color: #4a4a4a;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.24;
    padding: 10px 0;
}

.box__custom .tag{
    font-size: 14px;
    font-weight: 400;
    padding: 10px 0;
    align-items: center;
    color: #f14668;
    white-space: nowrap;
}

.box__custom p{
    text-align: left;
}

.box__custom .button-view,
.box__custom .button-card{
    position: absolute;
    bottom: 0;
    border-radius: 0;
    transition: all 0.8s;
    z-index: 1111;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.box__custom .button-view{
    background: #4682f1;
    border-color: transparent;
    color: #fff;
    padding: 10px 15px;
    opacity: 0;
    font-size: 14px;
    left: -1000px;
    font-weight: 300;
    border-top-right-radius: 30px;
}

.box__custom .button-card{
    background: #f14668;
    border-color: transparent;
    color: #fff;
    padding: 10px 15px;
    opacity: 0;
    font-size: 14px;
    right: -1000px;
    font-weight: 300;
    border-top-left-radius: 30px;
}

.box__custom:hover .button-view{
    opacity: 1;
    left: 0;
}

.box__custom:hover .button-card{
    opacity: 1;
    right: 0;
}

.button-view:hover,
.button-card:hover{
    letter-spacing: 1.5px;
}

@media(max-width:967px){
    .container {
        width: 50%;
    }
    .box__custom{
        width: 100%;
        margin: 10px 0;
    }

    .row{
        flex-direction: column;
    }
}

@media(max-width: 667px){
    .container {
        width: 80%;
    }
}
@media(max-width: 480px){
    .container {
        width: 95%;
    }
}

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see :- How to create Modal Image Only css

Related Posts

Leave a Reply

Your email address will not be published.