Hover effect to increase the column

Hey leilitacc,
Typically something like this would work:

#top .flex_column:hover {
	animation: grow 2s;
	animation-fill-mode: forwards;
}
@keyframes grow {
  to {
      transform: scale(1.2)
  }
}

but you probably will need to adjust the class for your column, if you need help please link to your page so we can examine.

Best regards,
Mike

Hi,

Is it possible to apply a 1px yellow border to the hover effect?

Yes, that should be possible. Please replace the modification with the following code:

#top .flex_column:hover {
	animation: grow 2s;
	animation-fill-mode: forwards;
}
@keyframes grow {
  to {
      transform: scale(1.2);
      border: 1px solid yellow;
  }
}

Best regards,
Ismael

Hi,
You could add a custom class to the column that you want it to would on and then add the custom class to the css, like this:

#top .customClass.flex_column:hover {
	animation: grow 2s;
	animation-fill-mode: forwards;
}
@keyframes grow {
  to {
      transform: scale(1.2);
      border: 1px solid yellow;
  }
}

Just change customClass to what you choose to use.

Best regards,
Mike

Hi,
It looks like in your grid cell you have the left & right padding set to 200px, try using the icons for the screen sizes to make this zero for mobile devices:

Best regards,
Mike