CODEWITHSUNDEEP
htmlcssanimation
Nicholas
Nicholas

Reputation: 3784

Animating div height without distorting the image

I want to scale up the container image without distorting the image.

While updating height seems to work, the container is scaling below and not above as I want it.

Here is a small prototype I am trying to make.

https://codepen.io/nicu-barbaro/pen/ExxdKZK

 .slider-item {
  width: 150px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transform-origin: bottom;
  margin: 0 10px;
   transition: all 0.3s ease-in-out;
  &:hover {
    transform: scaleY(1.5);

  }
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transform: scale(1);
    transition: clip-path 1s;
    transition: all 0.3s ease-in-out;
    transform-origin: bottom right;
  }
}

Here is a similar effect of scaling I want to achieve https://dribbble.com/shots/4815842-User-Reviews-Micro-Interactions?utm_source=Clipboard_Shot&utm_campaign=UI8&utm_content=User%20Reviews%20Micro%20Interactions&utm_medium=Social_Share .

Upvotes: 1

Views: 290

Answers (1)

Vadym Semenets
Vadym Semenets

Reputation: 143

You've set object-fit: cover for images and it looks like it does not affect, but it does. You can not see it, because you are scaling parent div element - the key word is scaling. So, to have a result you want and not to be depended on parent div or img height you should apply the proportional for image. If you've set transform: scaleY(1.5); for parent div, set transform: scaleX(1.5); for child image:

Here an example based on your code:

https://codepen.io/Nevados/pen/yLLRvMd

P.S. If you want to align image by center, you can apply translate propetry for img according to scaling value.

Upvotes: 1

Related Questions