JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Box_1x1_front" style="height:180px; background:#eaeaea; ">
    <a class="leftAllPlace" rel="thumb" title="" href="http://bonavestis.pl/image/cache/data/Produkty/Sukienki/Sukienka%20JUST%20UNIQUE%20Bandażowa%20W%20Beżu%20+Złoto/Image001-885x885.jpg">
        <div class="img-cont f_border">
            <img class="img-zoom img_2" src="http://bonavestis.pl/image/cache/data/Produkty/Sukienki/Sukienka%20JUST%20UNIQUE%20Bandażowa%20W%20Beżu%20+Złoto/Image001-372x372.jpg" />
                
            
        </div>
    </a>
</div>

CSS

div.img-cont {
    float:left; 
    position:relative; 
    margin:10px 20px 0 0px;
    width:180px; 
    height:160px;    
    border:0px solid #FFF;
    overflow:hidden !important;
     -webkit-border-radius:5px; 
        -moz-border-radius:5px; 
         -ms-border-radius:5px;
          -o-border-radius:5px; 
             border-radius:5px;           
}
.img_2:hover {
    width: 200px;
    height: 180px;
}
.img-zoom { 
    float:left; 
    position:relative; 
    margin:-20px 0 0 -20px; 
    width:220px; 
    height:200px;
    background-position:center center !important;
    -webkit-transition: all 0.25s ease-in-out;
       -moz-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
         -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
    
}
/*.transition {
    -webkit-transform: scale(0.93,0.93); 
       -moz-transform: scale(0.93,0.93);
        -ms-transform: scale(0.93,0.93);
         -o-transform: scale(0.93,0.93);
            transform: scale(0.93,0.93);   
}*/
.f_border{
     -webkit-border-radius:5px; 
        -moz-border-radius:5px; 
         -ms-border-radius:5px;
          -o-border-radius:5px; 
             border-radius:5px; 
}

JavaScript

/*$(document).ready(function(){
    $('.img_2').hover(function() {
        $(this).addClass('transition');
    }, function() {
        $(this).removeClass('transition');
    });
});
*/