当我缩放一个元素时，我想看到垂直溢出但设置水平溢出不可见

Question

我的容器中有几张 .cards。当我将鼠标移到卡片上时，我会使用属性 scale(1.5) 放大卡片。但我希望放大的卡片溢出容器，而不是溢出的部分不可见。要了解我的目标是什么，从容器中删除 overflow-x 和 overflow-y 属性就足够了。但就我而言，这不是解决方案，因为我不想要水平滚动条。因此我想设置： overflow-x:hidden 和 overflow-y:visible 但不起作用。有人可以检测到问题并指出解决方案吗？

<!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 class="second-section">
    <h2>Uscite indipendenti</h2>
    <div class="container">
      <div class="card"><span>Blues Brother</span></div>
      <div class="card"><span>The Place</span></div>
      <div class="card"><span>Jarhead</span></div>
      <div class="card">
        <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 class="card"><span>E' stata la mano di Dio</span></div>
    </div>
  </section>
</body>

</html>

澄清一下，这是垂直的预期结果（打开全屏页面）。

<!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 class="second-section">
    <h2>Uscite indipendenti</h2>
    <div class="container">
      <div class="card"><span>Blues Brother</span></div>
      <div class="card"><span>The Place</span></div>
      <div class="card"><span>Jarhead</span></div>
      <div class="card">
        <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 class="card"><span>E' stata la mano di Dio</span></div>
    </div>
  </section>
</body>

</html>

Answer 1

删除了 .container 上的 overflow 样式并设置了 body 上的 overflow。此外，确定 body 和 html 的高度，以便滚动条显示在底部。

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 class="second-section">
    <h2>Uscite indipendenti</h2>
    <div class="container">
      <div class="card"><span>Blues Brother</span></div>
      <div class="card"><span>The Place</span></div>
      <div class="card"><span>Jarhead</span></div>
      <div class="card">
        <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 class="card"><span>E' stata la mano di Dio</span></div>
    </div>
  </section>
</body>

</html>

当我缩放一个元素时，我想看到垂直溢出但设置水平溢出不可见

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

html

css

z-index

overflow

flexbox