悬停时带有内容的缩放框

Question

我有 4 个盒子，每个盒子都有一个很棒的字体图标、一个图标背景、一个 h3 和一个带有一些文本的 p。当我悬停时，我希望盒子和里面的所有东西都能缩放到 1.1 左右。我已经尝试将过渡添加到框 class 并在悬停时缩放，但它什么也没做。我还尝试将这些属性分别添加到框中的每个元素。我使用网格在移动设备上水平和垂直对齐框。我不包括媒体查询。

标题为“box”的第一个橙色框是一个非常基本的示例，说明了我想用其余框完成的任务。

这是html

<!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>

这是css

/* 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;
}

.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 */

Answer 1

对您的示例使用相同的代码似乎可行...

我added/edited这个给你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);
}

工作示例：

/* 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>

Answer 2

要在悬停时缩放，您应该在下面添加 css 代码。

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

}

您可以在 jsfiddle 测试您的代码并添加我的悬停代码。

悬停时带有内容的缩放框

Zoom Boxes With Content Inside On Hover

css

grid

hover