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>

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>

具有重叠元素的CSS滑动缩放效果

1 个答案: