on hover zoom image in a div

Question

When a user hovers over the picture i want to zoom in the image, but the image overflows over the container. How can i hide the overflow of this container?

<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

Just wrap your image in a container that has 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 fork: https://jsfiddle.net/azizn/anzude1x/