如何停止悬停过渡中元素的重叠？

Question

在我的网站中，我希望能够允许用户将鼠标悬停在图像上并通过过渡放大图像。我已经能够成功实现过渡，但是，当图像被放大时，它不断地与其他元素重叠。我当前的布局是在网格中排序的，并且容器已被赋予属性溢出：隐藏。

我试图在每个元素悬停时为其分配 z-index 值 -1，但是层之间存在连续变化，这看起来很可怕。如何允许放大每个图像而不与任何其他元素重叠？

这是我的 jsfiddle：https ://jsfiddle.net/Syed213shah/4u0vh5Lb/

body {

  background-color: #800020;

}

body, html {

  height: 100%;

  margin: 0;

}

  #box-container {

    display: flex;

    height: 600px;

    width: 75%;

  }

.container {

  min-height: 500px;

  width: 100%;

  display: grid;

  grid-template-columns: 50% 2fr;

  grid-template-rows: 50% 2fr;

  overflow: hidden;

  position: static;

}

.item1 { 

  background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');

  width: 100%;

  height: 200%;

  transition: all 0.5s ease-in-out; 

  position: relative;

}

.item1:hover {

   transform: scale(1.1); 

   z-index: -1;

}

.item2 { 

  background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');

  grid-column: 2;

  grid-row: 2;

  width: 100%;

  height: 400px;

  transition: all 0.5s ease-in-out; 

  position: relative;

}

.item2:hover {

   transform: scale(1.1); 

   z-index: -1;

}

.item3 {

  background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');

  grid-column: 2;

  grid-row: 1;

  width: 100%;

  height: 400px;

  transition: all 0.5s ease-in-out; 

  position: relative;

}

.item3:hover {

   transform: scale(1.1);

   z-index: -1;

}

Answer 1

我认为使用伪元素或内部标签（如您所愿）并缩放此元素设置其父元素（我们的<a>）更简单，overflow:hidden;以防止您的错误。在我的例子中，我使用了一个伪元素。我将这些代码行添加到您的 CSS（我还注释了一些行）：.container a {&nbsp; overflow: hidden;}.container a::after {&nbsp; height:100%;&nbsp; width:100%;&nbsp; content: "";&nbsp; position: absolute;&nbsp; transition: all 0.5s ease-in-out;&nbsp;&nbsp; z-index:-1;}.item1::after{&nbsp; background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');}body {&nbsp; background-color: #800020;}body, html {&nbsp; height: 100%;&nbsp; margin: 0;}#box-container {&nbsp; display: flex;&nbsp; height: 600px;&nbsp; width: 75%;}/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg&nbsp; *//* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 *//* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */.container {&nbsp; min-height: 500px;&nbsp; width: 100%;&nbsp; display: grid;&nbsp; grid-template-columns: 50% 2fr;&nbsp; grid-template-rows: 50% 2fr;&nbsp; overflow: hidden;&nbsp; position: static;}.item1 {&nbsp;&nbsp; /*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/&nbsp; width: 100%;&nbsp; height: 200%;&nbsp; /*transition: all 0.5s ease-in-out;*/&nbsp;&nbsp; position: relative;}/*.item1:hover {&nbsp; &nbsp;transform: scale(1.1);&nbsp;&nbsp; &nbsp;z-index: -1;}*/.item2 {&nbsp;&nbsp; /*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/&nbsp; grid-column: 2;&nbsp; grid-row: 2;&nbsp; width: 100%;&nbsp; height: 400px;&nbsp; /*transition: all 0.5s ease-in-out; */&nbsp; position: relative;}/*.item2:hover {&nbsp; &nbsp;transform: scale(1.1);&nbsp;&nbsp; &nbsp;z-index: -1;}*/.item3 {&nbsp; /*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/&nbsp; grid-column: 2;&nbsp; grid-row: 1;&nbsp; width: 100%;&nbsp; height: 400px;&nbsp; /*transition: all 0.5s ease-in-out; */&nbsp; position: relative;}/* -------------------------- *//* I added these lines of code *//* -------------------------- */.container a {&nbsp; overflow: hidden;}.container a::after {&nbsp; height:100%;&nbsp; width:100%;&nbsp; content: "";&nbsp; position: absolute;&nbsp; transition: all 0.5s ease-in-out;&nbsp;&nbsp; z-index:-1;}.item1::after{&nbsp; background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');&nbsp;&nbsp;&nbsp; /*to set a background without repetition and always horizontally center you could use also this syntaxt:&nbsp; background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent;&nbsp; */}.item2::after{&nbsp; background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');}.item3::after{&nbsp; background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');}.container a:hover::after{&nbsp; transform: scale(1.1);}/* -------------------------- *//* I added these line of code *//* -------------------------- */.item1 h2 {&nbsp; font-size: 50px;&nbsp; position: absolute;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: white;&nbsp; text-decoration: none;&nbsp; padding: 500px 70px;}.item2 h2 {&nbsp; font-size: 50px;&nbsp; position: absolute;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: white;&nbsp; text-decoration: none;&nbsp; padding: 200px 200px;}.item3 h2 {&nbsp; font-size: 50px;&nbsp; position: absolute;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: white;&nbsp; text-decoration: none;&nbsp; padding: 185px 200px;}.full-height {&nbsp; height: 100%;}.bottom-height {&nbsp; height: 100%;}h1 {&nbsp; font-size: 50px;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: #002a58;}#navbar {&nbsp; background-color: #800020;&nbsp; position: fixed;&nbsp; top: -30px;&nbsp; width: 100%;&nbsp; transition: top 0.3s;}#navbar ul {&nbsp; height: -30px;&nbsp;&nbsp; padding: 10px 0 10px 40px;&nbsp;&nbsp; width: 100%;&nbsp;}#navbar li{&nbsp; float: left;&nbsp; line-height: 20px;&nbsp; margin-right: 30px;&nbsp; padding: 10px 3px;&nbsp; position: relative;&nbsp; list-style-type: none;}#navbar li a {&nbsp; font-family: Staatliches;&nbsp; text-decoration: none;&nbsp; color: rgb(13, 11, 134);}#navbar li a:hover {&nbsp; background-color: #ddd;&nbsp; color: black;}<body>&nbsp; &nbsp;<div class="full-height">&nbsp; &nbsp; &nbsp; <script src="script.js"></script>&nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2> Europe's biggest stadium&nbsp; </h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>European Success</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Current Squad</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div id="navbar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="https://first-website.awais.repl.co/">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="news.asp">Squad</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="contact.asp">Contact</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="about.asp">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a2><a>Created by Awais</a></a2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <h1>FC Barcelona</h1>&nbsp; &nbsp;</div>&nbsp; &nbsp;<div class="bottom-height">&nbsp; &nbsp;</div></body>.item2::after{&nbsp; background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');}.item3::after{&nbsp; background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');}.container a:hover::after{&nbsp; transform: scale(1.1);}我没有碰你的 HTML。

Answer 2

而不是变换：在您的图像上缩放，也许使用背景大小和背景位置可能会给您寻求的结果，并对您已经使用的实际裁剪进行更多控制。附带的 jsfiddle 使用这样的示例修改了您的代码。我确实为文本叠加保留了变换比例。还要注意图像容器需要一个 overflow:hidden 以防止单元格之间的悬停交互。这是您相应修改的 css；body {&nbsp; background-color: #800020;}body, html {&nbsp; height: 100%;&nbsp; margin: 0;}#box-container {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; height: 600px;&nbsp; &nbsp; width: 75%;&nbsp; }.container {&nbsp; min-height: 500px;&nbsp; width: 100%;&nbsp; display: grid;&nbsp; grid-template-columns: 50% 2fr;&nbsp; grid-template-rows: 50% 2fr;&nbsp; overflow: hidden;&nbsp; position: static;}.item1 {&nbsp; background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');&nbsp;background-position: 0% 50%;&nbsp;background-size:200%;&nbsp; width: 100%;&nbsp; height: 200%;&nbsp; transition: all 0.5s ease-in-out;&nbsp; position: relative;&nbsp; overflow: hidden;}.item1:hover {&nbsp; &nbsp;background-size:220%;&nbsp; &nbsp;background-position: 5% 50%;}.item2 {&nbsp; background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');&nbsp; background-position: 0% 50%;&nbsp; background-size:165%;&nbsp; grid-column: 2;&nbsp; grid-row: 2;&nbsp; width: 100%;&nbsp; height: 400px;&nbsp; transition: all 0.5s ease-in-out;&nbsp; position: relative;&nbsp; overflow: hidden;}.item2:hover {&nbsp; &nbsp;background-position: 5% 50%;&nbsp; &nbsp;background-size:180%;}.item3 {&nbsp; background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');&nbsp; background-position: 0% 15%;&nbsp; background-size:175%;&nbsp; grid-column: 2;&nbsp; grid-row: 1;&nbsp; width: 100%;&nbsp; height: 400px;&nbsp; transition: all 0.5s ease-in-out;&nbsp; position: relative;&nbsp; overflow: hidden;}.item3:hover {&nbsp; &nbsp;background-position: 5% 15%;&nbsp; &nbsp;background-size:195%;}.item1 h2 {&nbsp; font-size: 50px;&nbsp; position: absolute;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: white;&nbsp; text-decoration: none;&nbsp; padding: 500px 70px;&nbsp; transform: scale(1);&nbsp; transition: all 0.5s ease-in-out;}.item2 h2 {&nbsp; font-size: 50px;&nbsp; position: absolute;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: white;&nbsp; text-decoration: none;&nbsp; padding: 200px 200px;&nbsp; transform: scale(1);&nbsp; transition: all 0.5s ease-in-out;}.item3 h2 {&nbsp; font-size: 50px;&nbsp; position: absolute;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: white;&nbsp; text-decoration: none;&nbsp; padding: 185px 200px;&nbsp; transform: scale(1);&nbsp; transition: all 0.5s ease-in-out;}.item1:hover h2,.item2:hover h2,.item3:hover h2 {&nbsp; &nbsp;transform: scale(1.1);}.full-height {&nbsp; height: 100%;}.bottom-height {&nbsp; height: 100%;}h1 {&nbsp; font-size: 50px;&nbsp; font-family: Staatliches;&nbsp; text-align: center;&nbsp; color: #002a58;}#navbar {&nbsp; background-color: #800020;&nbsp; position: fixed;&nbsp; top: -30px;&nbsp; width: 100%;&nbsp; transition: top 0.3s;}#navbar ul {&nbsp; height: -30px;&nbsp; padding: 10px 0 10px 40px;&nbsp; width: 100%;}#navbar li{&nbsp; float: left;&nbsp; line-height: 20px;&nbsp; margin-right: 30px;&nbsp; padding: 10px 3px;&nbsp; position: relative;&nbsp; list-style-type: none;}#navbar li a {&nbsp; font-family: Staatliches;&nbsp; text-decoration: none;&nbsp; color: rgb(13, 11, 134);}#navbar li a:hover {&nbsp; background-color: #ddd;&nbsp; color: black;}#navbar .a2{&nbsp; float: right;&nbsp; line-height: 20px;&nbsp; margin-right: 50px;&nbsp; padding: 10px 3px;&nbsp; position: relative;&nbsp; list-style-type: none;}#navbar .a2 a {&nbsp; font-family: Staatliches;&nbsp; text-decoration: none;&nbsp; color: rgb(13, 11, 134);}https://jsfiddle.net/w9n6ajq1/