on hover zoom image in a div

Question

Когда пользователь наводил курсор на изображение, я хочу увеличить изображение, но изображение переполняется над контейнером. Как я могу скрыть переполнение этого контейнера?

<div class="shop-item"> 
    <img src="http://redensart.bplaced.net/img/schild.jpg"/> 
    <div class="shop-content"> 
     <h3>Schilder</h3> 
     <p>Kleiner Beispieltext zur Beschreibung des Produktes</p> 
     <a href="#" class="button">Bestellen</a> 
    </div> 
</div> 

https://jsfiddle.net/j6fpcykk/

Answer 1

Просто обернуть изображение в контейнер, который имеет overflow:hidden.

.shop-item { 
 
    width: 50%; 
 
    flex-basis: 33, 33%; 
 
    margin: 10px; 
 
    border: 1px solid #cdcdcd; 
 
    overflow: hidden; 
 
} 
 
.shop-item .imgContainer { 
 
    width: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 
.shop-item:hover .imgContainer img { 
 
    -webkit-transform: scale(1.3); 
 
    transform: scale(1.3); 
 
} 
 
.shop-item .imgContainer img { 
 
    width: 100%; 
 
    -webkit-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
} 
 
.shop-item > .shop-content { 
 
    padding: 10px; 
 
}

<div class="shop-item"> 
 
    <div class="imgContainer"> 
 
    <img src="http://redensart.bplaced.net/img/schild.jpg" /> 
 
    </div> 
 
    <div class="shop-content"> 
 
    <h3>Schilder</h3> 
 
    <p>Kleiner Beispieltext zur Beschreibung des Produktes</p> 
 
    <a href="#" class="button">Bestellen</a> 
 
    </div> 
 
</div>

jsFiddle вилка: https://jsfiddle.net/azizn/anzude1x/