javascript - 悬停缩放图像如图所示

Question

我有这个图片库，我想在悬停时缩放图片。我在下面展示了两张图片，第一张没有悬停效果，第二张是图像悬停时。这应该应用于每个图像。我还向您展示了我用来创建画廊的代码。

HTML

 <div class="tab-content">
      <div class="tab-pane active" id="all">
           <div class="row">
                <div class="col-xl-6 col-lg-6 ">
                     <div class="first-img">
                          <img src="img/image_1.png" alt="">
                           <div class="text">
                                <h3>Mixed Gin Drinks</h3>
                                <p>Sit amet commodo nulla facilisi</p>
                            </div> 
                      </div>
                      <div class="second-img">
                           <img src="img/image_3.png" alt="">
                           <div class="text">
                                <h3>Gin Tonic</h3>
                                <p>Sit amet commodo nulla facilisi</p>
                           </div>                          
                      </div>
               </div>
               <div class="col-xl-6 col-lg-6 second-col">
                    <div class="third-img">
                         <img src="img/image2.png" alt="">
                         <div class="text">
                              <h3>Gin on a Bar </h3>    
                              <p>Sit amet commodo nulla facilisi</p>
                         </div>
                   </div>
                   <div class="fourth-img">
                        <img src="img/image_4.png" alt="">
                         <div class="text">
                              <h3>Gin Tonic 2</h3>   
                         <p>Sit amet commodo nulla facilisi</p> 
                    </div>
                </div>
              </div>
          </div>   
      </div>
   </div>

CSS

main .gallery .tab-content .tab-pane .first-img,.second-img,.third-img,.fourth-img{
    position: relative;
    margin-bottom: 15%;
}
main .gallery .tab-content .tab-pane .second-col{
    margin-top:5%
}
main .gallery .tab-content .tab-pane .text{
    position: absolute;
    left: 50px;
    bottom: -60px;
}
main .gallery .tab-content .tab-pane .text h3{
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0px;
    font-weight: bold;
    margin-bottom: 0;
}
main .gallery .tab-content .tab-pane .text p{
    font-size: 16px;
    opacity: 0.5;
}
main .gallery .tab-content .tab-pane img{
    width: 100%;
}

标签： javascripthtmljquerycss

Answer 1

如果您想使用 CSS 进行尝试，可以尝试“转换”属性 + 比例。选择你的选择器，在下面的“img”标签中，你可以选择你的：

img:hover {
    transform: scale(2,2);
}