Element on hover scaled beyond the parent size

Zenit 0
Viewed 25

Trying to scale a card beyond the size of its parent and other divs without success.

Any idea how to tackle this?

CodePen

.iZNdlS {
z-index: 200;
position: relative;
flex-direction: column;
background-color: rgb(255, 255, 255);
border-radius: 4px;
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
flex-shrink: 0;
min-width: 300px;
max-width: 300px;
min-height: 490px;
max-height: 490px;
transition: transform 0.7s ease 0s;
transform-origin: center top 0px;

}

css-position scale animation css
1 Answers

If you want to scale only image when hovering over the card:

HTML:

<div class="card">
  <div class="card__image-holder">
    <img src="https://loremflickr.com/cache/resized/65535_51923601496_2649a4c0ce_320_240_nofilter.jpg" alt="my-cat">
  </div>
  
  <div class="card__content">
   <h3>My Cat</h3>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit ut repellendus veniam, etcorrupti iusto sequi repellat pariatur commodi est iure repudiandae?</p>
  </div>

</div>

CSS:

.card {
  background: #FFF;
  width: 300px;
  height: auto;
  overflow: hidden;
  border-radius: 8px;
}

.card__image-holder {
  width: 100%;
  overflow: hidden;
}

.card__image-holder img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  transition: transform 0.4s;
}

.card__content {
  padding: 0 20px 20px;
}

.card:hover .card__image-holder img {
  transform: scale(1.2);
}

The key is to add wrapper around image and overflow: hidden; to that wrapper, so image don't scale outside the wrapper, than apply transform of image on card hover.

Here is jsfiddle: https://jsfiddle.net/g7256y1a/1/

usergxpb0
Related