On hover zoom image like shown

Question

I have this gallery of images and I want on hover to zoom the image. I have shown below two images the first one is without hover effect and the second one is when image is hovered. This should be applied on every image. I also show you the code that I used to create the gallery.

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%;
}

Answer 1

If you want to try that with CSS, you can try the "Transform" Property + scale. choose your selector, in below "img" tag is taken, you can select yours:

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

Answer 2

You can achieve this by selecting the "img" tag in the CSS as shown below,

img{
  transition: 0.5s all ease-in-out; /*Animation for smooth transformation of images*/
}

Now, to add the zoom effect on hover

img:hover{
  transform: scale(1.5); /*150% zoom*/
}