css-Zoom Boxes With Content Inside On Hover

John 2020-12-02 03:25:02

Using the same code for your example seems to work...

I added/edited this to your CSS:

.service_box {
    margin: 0 auto;
    background:  #fdfffc;
    border-radius: 5%;
    padding: 1.5rem 2rem;
    max-width: 400px;
    text-align: justify;
    transition: transform .2s; /* Animation */
}


.service_box:hover {
    transform: scale(1.1);
}

Working example:

/* GLOBALS */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* EXAMPLE BOX */
.zoom-box {
    background-color:#CF4B32;
    width: 100px;
    height: 100px;
    border-radius: 5%;
    padding: 5px;
    margin: 32px auto;
    transition: transform .2s; /* Animation */
}

.zoom-box h3 {
    text-align: center;
}

.zoom-box:hover {
    transform: scale(1.1);
}
/* EXAMPLE BOX END */


/* BOXES WITH NO HOVER EFFECT */
#services { 
    background: rgb(0, 0, 17);
    min-height: 100vh;
}

#services h1 {
    padding: 80px;
    color: #fdfffc;
    text-align: center;
}

.service_grid {
    padding: 0 30px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 'de mn ma me';
}

.service_box {
    margin: 0 auto;
    background:  #fdfffc;
    border-radius: 5%;
    padding: 1.5rem 2rem;
    max-width: 400px;
    text-align: justify;
    transition: transform .2s; /* Animation */
}


.service_box:hover {
    transform: scale(1.1);
}


.service_box h3 {
    text-align: center;
}

/* ICONS & BACKGROUNDS */ 

.icon_back {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
} 

.dlvry {
    grid-area: de;

}        

.truck_back {
    background: #b0def5;
    padding: 20px;
}   

.fa-truck {
    
    color: #03254c;

}

.mnfct {
    grid-area: mn;
}

.industry_back {
    background: #f1acac;
    padding: 20px;
}

.fa-industry {
    color: #b71c1c;
}

.mktg {
    grid-area: ma;
}

.bullhorn_back {
    background: #fcf088;
    padding: 20px;
}

.fa-bullhorn {
    color: #fabc20;
}

.merch {
    grid-area: me;
}

.store_back {
    padding: 17px;
    background: #aed581;
}

.fa-store {
    color: #33691e;
}
/* ICONS & BACKGROUNDS END */

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="./box.css">
        <title>Document</title>
    </head>
    <body>
        <div class="zoom-box">
            <div>
                <i class="fas fa-phone"></i>
            </div>
            <h3>box</h3>
            <p>box zooms on hover</p>
        </div>
        
        <section id="services">
            <h1>Services</h1>
            <div class="service_grid">
                        
                <div class="service_box dlvry">
                    <div class="truck_back icon_back">
                        <i class="fas fa-truck fa-3x"></i>
                    </div>
                    <h3>Delivery</h3> <br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
                </div>

                <div class="service_box mnfct">
                    <div class="industry_back icon_back">
                        <i class="fas fa-industry fa-3x"></i>
                    </div>
                    <h3>Manufacture</h3> <br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
                </div>

                <div class="service_box mktg">
                    <div class="bullhorn_back icon_back">
                        <i class="fas fa-bullhorn fa-3x"></i>
                    </div>
                    <h3>Marketing</h3> <br>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
                </div>

                <div class="service_box merch">
                    <div class="store_back icon_back">
                        <i class="fas fa-store fa-3x"></i>
                    </div>
                    <h3>Merchandising</h3> <br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
                </div>

            </div>
        </section>
    </body>
</html>

Zoom Boxes With Content Inside On Hover

热门帖子

热门github