When I scale an element I want see the vertical overflow but set invisible the horizontal overflow-CodePudding

I have several .cards inside my container. When I go with the mouse over a card I zoom in the card with the property scale(1.5). But I want that the zoomed in card overflow the container instead the part in overflow isn't visible. To understand what is my goal it's enough remove the overflow-x and overflow-y properties from the container. But in my case this isn't a solution beacause I don't want an horizontal scroll bar. Thus I thought to set: overflow-x:hidden and overflow-y:visible but doesn't work. Someone can detect the problem and point out me a solution?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    section {
      margin: 2rem 0;
    }
    
    section h2 {
      margin-bottom: 1rem;
      font-weight: 400;
      color: #777777;
    }
    
    .container {
      width: 100%;
      height: 150px;
      flex-wrap: nowrap;
      overflow-x: hidden;
      overflow-y: visible;
      display: flex;
      z-index: -10;
      /* background-color: black; */
    }
    /* stile per i caroselli */
    /* stile generico per tutte la cards */
    
    .card {
      border-radius: 3px;
      height: 100%;
      padding: 1rem;
      box-shadow: -3px -153px 119px -119px rgba(0, 0, 0, 0.75) inset;
      width: 40%;
      margin-right: 1rem;
      position: relative;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      cursor: pointer;
      transition: 0.5s;
      overflow: visible;
    }
    /* .card:hover {
} */
    
    .second-section .card,
    .third-section .card,
    .fourth-section .card {
      width: 20%;
    }
    
    .card span {
      display: block;
      font-weight: 300;
      font-size: 1.1rem;
      transition: 0.3s;
    }
    /* stili primo carosello */
    
    .card p {
      display: block;
      font-weight: 200;
      font-size: 0.8rem;
      margin-top: 0.6rem;
      opacity: 0;
      transition: 0.4s;
    }
    
    .card:hover span {
      top: 0;
    }
    
    .card:hover p {
      opacity: 1;
    }
    
    .card:hover {
      box-shadow: -3px -153px 119px -70px rgba(0, 0, 0, 0.75) inset;
    }
    
    .second-section .container div {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
      border: 2px solid red;
    }
    
    .second-section .container div:nth-child(2) {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
    }
    
    .second-section .container div:nth-child(3) {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
    }
    
    .second-section .container div:nth-child(4) {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
    }
    
    .second-section .card:hover {
      transform: scale(1.3);
      z-index: 2000;
    }
  </style>
</head>

<body>
  <section >
    <h2>Uscite indipendenti</h2>
    <div >
      <div ><span>Blues Brother</span></div>
      <div ><span>The Place</span></div>
      <div ><span>Jarhead</span></div>
      <div >
        <span>E' stata la mano di Dio</span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis beatae explicabo, labore aut voluptatibus harum vero cum, soluta adipisci dolores repudiandae consequuntur exercitationem sint dolore quidem
        tempora nulla? Vitae, provident.
      </div>
      <div ><span>E' stata la mano di Dio</span></div>
    </div>
  </section>
</body>

</html>

To clarify, this is the vertical expected result (open the full screen page).

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    section {
      margin: 2rem 0;
    }
    
    section h2 {
      margin-bottom: 1rem;
      font-weight: 400;
      color: #777777;
    }
    
    .container {
      width: 100%;
      height: 150px;
      flex-wrap: nowrap;
      display: flex;
      z-index: -10;
      /* background-color: black; */
    }
    /* stile per i caroselli */
    /* stile generico per tutte la cards */
    
    .card {
      border-radius: 3px;
      height: 100%;
      padding: 1rem;
      box-shadow: -3px -153px 119px -119px rgba(0, 0, 0, 0.75) inset;
      width: 40%;
      margin-right: 1rem;
      position: relative;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      cursor: pointer;
      transition: 0.5s;
      overflow: visible;
    }
    /* .card:hover {
    } */
    
    .second-section .card,
    .third-section .card,
    .fourth-section .card {
      width: 20%;
    }
    
    .card span {
      display: block;
      font-weight: 300;
      font-size: 1.1rem;
      transition: 0.3s;
    }
    /* stili primo carosello */
    
    .card p {
      display: block;
      font-weight: 200;
      font-size: 0.8rem;
      margin-top: 0.6rem;
      opacity: 0;
      transition: 0.4s;
    }
    
    .card:hover span {
      top: 0;
    }
    
    .card:hover p {
      opacity: 1;
    }
    
    .card:hover {
      box-shadow: -3px -153px 119px -70px rgba(0, 0, 0, 0.75) inset;
    }
    
    .second-section .container div {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
      border: 2px solid red;
    }
    
    .second-section .container div:nth-child(2) {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
    }
    
    .second-section .container div:nth-child(3) {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
    }
    
    .second-section .container div:nth-child(4) {
      max-width: 30%;
      background-image: url("https://picsum.photos/id/1001/1920/1040");
      background-size: cover;
    }
    
    .second-section .card:hover {
      transform: scale(1.3);
      z-index: 2000;
    }
  </style>
</head>

<body>
  <section >
    <h2>Uscite indipendenti</h2>
    <div >
      <div ><span>Blues Brother</span></div>
      <div ><span>The Place</span></div>
      <div ><span>Jarhead</span></div>
      <div >
        <span>E' stata la mano di Dio</span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis beatae explicabo, labore aut voluptatibus harum vero cum, soluta adipisci dolores repudiandae consequuntur exercitationem sint dolore quidem
        tempora nulla? Vitae, provident.
      </div>
      <div ><span>E' stata la mano di Dio</span></div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

Removed the overflow style on .container and set the overflow on the body. Also, determined a height for body and html so the scrollbar shows at the bottom.

body,
html {
  height: 100%;
  overflow-x: scroll;
}

section {
  margin: 2rem 0;
}

section h2 {
  margin-bottom: 1rem;
  font-weight: 400;
  color: #777777;
}

.container {
  width: 100%;
  height: 150px;
  flex-wrap: nowrap;
  overflow-y: visible;
  display: flex;
  z-index: -10;
  /* background-color: black; */
}


/* stile per i caroselli */


/* stile generico per tutte la cards */

.card {
  border-radius: 3px;
  height: 100%;
  padding: 1rem;
  box-shadow: -3px -153px 119px -119px rgba(0, 0, 0, 0.75) inset;
  width: 40%;
  margin-right: 1rem;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  cursor: pointer;
  transition: 0.5s;
  overflow: hidden;
}


/* .card:hover {
} */

.second-section .card,
.third-section .card,
.fourth-section .card {
  width: 20%;
}

.card span {
  display: block;
  font-weight: 300;
  max-height: 100%;
  font-size: 1.1rem;
  transition: 0.3s;
  flex-basis: 100%;
}


/* stili primo carosello */

.card p {
  display: block;
  font-weight: 200;
  font-size: 0.8rem;
  margin-top: 0.6rem;
  opacity: 0;
  transition: 0.4s;
}

.card:hover span {
  top: 0;
}

.card:hover p {
  opacity: 1;
}

.card:hover {
  box-shadow: -3px -153px 119px -70px rgba(0, 0, 0, 0.75) inset;
}

.second-section .container div {
  max-width: 30%;
  background-image: url("https://picsum.photos/id/1001/1920/1040");
  background-size: cover;
  border: 2px solid red;
}

.second-section .container div:nth-child(2) {
  max-width: 30%;
  background-image: url("https://picsum.photos/id/1001/1920/1040");
  background-size: cover;
}

.second-section .container div:nth-child(3) {
  max-width: 30%;
  background-image: url("https://picsum.photos/id/1001/1920/1040");
  background-size: cover;
}

.second-section .container div:nth-child(4) {
  max-width: 30%;
  background-image: url("https://picsum.photos/id/1001/1920/1040");
  background-size: cover;
}

.second-section .card:hover {
  transform: scale(1.3);
  z-index: 2000;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

</head>

<body>
  <section >
    <h2>Uscite indipendenti</h2>
    <div >
      <div ><span>Blues Brother</span></div>
      <div ><span>The Place</span></div>
      <div ><span>Jarhead</span></div>
      <div >
        <span>E' stata la mano di Dio Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis beatae explicabo, labore aut voluptatibus harum vero cum, soluta adipisci dolores repudiandae consequuntur exercitationem sint dolore quidem
        tempora nulla? Vitae, provident.</span>
      </div>
      <div ><span>E' stata la mano di Dio</span></div>
    </div>
  </section>
</body>

</html>