CODEWITHSUNDEEP
htmlcssimagehover
Nils Blaumer
Nils Blaumer

Reputation: 19

on hover zoom image in a div

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/

Upvotes: 0

Views: 2705

Answers (1)

Aziz
Aziz

Reputation: 7783

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/

Upvotes: 3

Related Questions