Support » Theme: Twenty Seventeen » hiding overflow in a flexbox

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator stephencottontail

    (@stephencottontail)

    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 ...
    }

    thanks!

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