How to add transition using a JS file

Question

I am working on a grid layout project. In this project when you mouseover an element, the element row increases hence the size increase. The problem is while doing so the change is very fast and I want it to be smooth and slow. Thus I thought of adding a transition to it, but it didn't work.

So here the background color got the transition effect but the increase in the size of the first element did not.

The code snippet can be run and expanded to full screen. There you will see on hovering the first element, the size of the element increases but no transition is seen. The height increases very quickly. but the blue colour fills up with a transition. I want the size also to increase slowly with a transition

How can I do that?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 100px;
}
.design{
  width: 100%;
  /* padding: 10px; */
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  transition: all 2s;

}
.first {
  grid-row-start: 1;
  grid-row-end: 2;
  transition: all 2s;
}



.first:hover {
  grid-row-start: 1;
  grid-row-end: 3;
  background-color: blue;
}

<div class="container">

  <div class="design first ">
    <img class="instaLogo " src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
  </div>

  <div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
  </div>

  <div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
  </div>


</div>

Answer 1

The core of the problem lies in the attribute you are trying to animate.

Looking into the documentation 'grid-row-end' only allows for so called 'discrete' animations. This means that there wont be any calculated keyframes for this attribute. So it will never really be smooth, since there are no in-between states for the rendering.

Therefore you will need another property to transform if you want a smooth animation.

You could either set a fixed height for your container and just increase that, or you add some padding or margin around your inner content and animate those values on hover. Here an example on how it would look:

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding: 100px;
}
.design{
width: 100%;
/* padding: 10px; */
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
transition: all 2s;

}
.first {
grid-row-start: 1;
grid-row-end: 2;
transition: all 2s;
}

.instaLogo{
transition: all 2s;
padding-top:0rem;
padding-bottom:0rem;
}

.first:hover {
background-color: blue;
}
.first:hover .instaLogo{
padding-top:3rem;
padding-bottom:3rem;
}

<div class="container">

<div class="design first ">
    <img class="instaLogo " src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
</div>

<div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
</div>

<div class="design ">
    <img class="instaLogo" src="https://tse3.mm.bing.net/th?id=OIP.ZrB3_lFOWiT6GARgdg7iogHaHL&pid=Api&P=0&h=180" alt="">
</div>


</div>

If you don't want the other container to grow, you can add a max-height of your initial height and only increase the value of the currently hovered element.