html - 2个div之一上的CSS缩放抖动

Question

我将 2<div>并排放置，并在悬停时添加了缩放动画和叠加层。然而，当鼠标在该区域内移动时左侧会抖动，而右侧在悬停时非常稳定。

我认为双方都使用几乎相同的代码，并且无法弄清楚这个问题的原因。是什么导致了抖动？

代码在这里

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  opacity: 0;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

标签： htmlcsscss-animations

Answer 1

您有一个堆叠元素的复杂情况。你设置你的覆盖元素position:absolute和第一个定位的祖先是showcase所以最初两个覆盖重叠并填充宽度showcase

删除不透明度以注意这一点：

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

现在，在悬停时，您将添加scale()到叠加层的父元素，这将使它们相对于它们定位，因为transform 更改了绝对和固定元素的包含块。

所以你会有这个：

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>

您正在两种状态之间切换，并且由于在第一个状态中存在重叠，因此在失去悬停效果的情况下会产生不良影响。第二张图片不会发生这种情况，因为它的叠加层位于顶部，因此您永远不会失去悬停。

为避免这种情况，您可以最初对元素进行转换，或者考虑position:relative对它们进行转换，以确保您的叠加元素相对于它们的父元素定位并且永远不会重叠：

body {
  font-family: 'Asap', sans-serif;
  color: white;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
  background: repeating-linear-gradient( 45deg, #222, #222 10px, #333 10px, #333 20px);
  background-attachment: fixed;
}

.showcase {
  margin-top: 5%;
  position: relative;
  display: block;
  overflow: hidden;
}

.cameraShowcase {
  width: 47.5%;
  padding-right: 2.5%;
  float: left;
  transition: transform .3s;
  transform: scale(1);
}

.cameraShowcase:hover .overlay {
  opacity: 0.75;
}

.cameraShowcase:hover {
  transform: scale(1.1);
}

.wheelShowcase {
  width: 47.5%;
  padding-left: 2.5%;
  float: left;
  transition: transform .3s;
  transform: scale(1);
}

.wheelShowcase:hover .overlay {
  opacity: 0.75;
}

.wheelShowcase:hover {
  transform: scale(1.1);
}

.overlay {
  text-align: center;
  position: absolute;
  transition: .3s;
  background-color: #333;
  opacity:0;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 95%;
}

#leftOverlay {
  left: 0;
}

#rightOverlay {
  left: 5%;
}

.textContainer {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15%;
  line-height: 2;
}

<div class="showcase">
  <div class="cameraShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="camera" />
    </div>
    <div class="overlay" id="leftOverlay">
      <div class="textContainer">
        <h3>Camera and Sensors</h3>
      </div>
    </div>
  </div>

  <div class="wheelShowcase">
    <div class="pic">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="wheel" />
    </div>
    <div class="overlay" id="rightOverlay">
      <div class="textContainer">
        <h3>Power System</h3>
      </div>
    </div>
  </div>
</div>