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

Question

我有一个带有两个div的标题。两个div 彼此相邻。我为此使用带有弹性框的引导程序。我想在将鼠标悬停在div 上时创建滑动效果(和缩放(。将鼠标悬停在左侧div 上应该会更改左侧和右侧div 的宽度。

我遇到的棘手部分是我想添加一条与右侧div 颜色相同的对角线以创建漂亮的外观。我尝试在右侧div 上使用伪 after 创建它，但问题是当悬停时它不会与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附加到标题内容中，并在.header-content类上设置了postion:relative。

.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>