html - CSS滑动缩放效果与重叠元素

Question

我有一个带有两个 div 的标题。两个 div 紧挨着。为此，我正在使用带有弹性框的引导程序。我想在将鼠标悬停在 div 上时创建滑动效果（和缩放）。将鼠标悬停在左侧 div 上应该会改变左右 div 的宽度。

我遇到的棘手部分是我想添加一条与正确 div 颜色相同的对角线以创建漂亮的外观。我尝试在右侧 div 上使用伪之后创建它，但问题是悬停时它不会与 div 的其余部分一起移动。我不得不把它position: absolute显示在正确的 div 之外。

也许我做错了什么，或者也许有更好的解决方案。这个我还没想通

JSfiddle

https://jsfiddle.net/aq9Laaew/235971/

.header {
  z-index: 1;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

.header-img {
  width: 60vw;
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(asset_path("bgs/bg-1.jpg"));
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
}

.header-img:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  width: 80vw;
}

.header-content {
  color: #000000;
  background-color: #FFFFFF;
  width: 40vw;
  height: 50vh;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  overflow-x: visible;
}

.header-content:hover {
  width: 80vw;
}

.overlay::after {
  content: " ";
  display: inline-block;
  position: absolute;
  width: 20%;
  height: 100%;
  left: 50%;
  border-style: dashed;
  border-width: 1em;
  border-color: #000000;
}

<div class="header d-flex flex-row">
  <div class="header-img"></div>
  <div class="header-content">
    <div class="overlay"></div>
    <div class="d-flex justify-content-center">
      <div class="mt-5">
        <div class="text-center header-text">
          <h2>Text</h2>
        </div>
      </div>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

经过一番调查，我修复了叠加层的滑动效果。我已经div.overlay在标题内容中附加了内容并设置postion:relative了.header-content类。

.header {
  z-index: 1;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

.header-img {
  width: 60vw;
  height: 50vh;
  background-position: 75% 50%;
  background-color: #EFEFEF;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
}

.header-img:hover {
  transform: scale(1.1);
  width: 100vw;
}

.header-content {
  position: relative;
  color: #000000;
  background-color: #FFFFFF;
  width: 40vw;
  height: 50vh;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  overflow-x: visible;
}

.header-content:hover {
  width: 80vw;
}

.content-text {
  position: absolute;
  left: -2%;
}

.overlay::after {
  content: " ";
  display: inline-block;
  position: absolute;
  width: 70%;
  height: 200%;
  left: -35%;
  top: -60%;
  background-color: #FFFFFF;
  transform: rotate(10deg);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header d-flex flex-row">
  <div class="header-img"></div>
  <div class="header-content">
    <div class="overlay"></div>
    <div class="d-flex justify-content-center">
      <div class="mt-2">
        <div class="text-center content-text">
          <h3>text</h3>
        </div>
      </div>
    </div>
  </div>
</div>