hiding overflow in a flexbox

Viewing 2 replies - 1 through 2 (of 2 total)

  • You don’t want to set the transform on .flex-item:hover itself; that causes the whole item to scale up and overflow: hidden does nothing because technically, nothing is overflowing with respect to .flex-item. Instead, you’ll need to set overflow: hidden on .flex-item itself and set the transform on the <img> within the item:

    .flex-item {
  overflow: hidden;
  ... other CSS ...
}

.flex-item:hover img {
  transform: scale( 1.3 );
  -webkit-transform: scale( 1.3 );
  ... other CSS ...
}
    Thread Starter modoseyoum

    (@modoseyoum)

    thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘hiding overflow in a flexbox’ is closed to new replies.

Tags