当我将鼠标悬停在 div 上时,我想要一个从左向右滑动的叠加层,然后在 1 秒延迟后内容可见。这是我的 HTML 代码:
/* overlay */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.dv-each:hover .overlay {
/* transition-delay: 0.4s; */
transition: .5s ease-in-out;
width: 100%;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
white-space: nowrap;
}
<div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-each position-relative h-75">
<a href="{{ route('xdsoft.tintuc')}}">
<img src="{{ asset('image/TrangChu/rectangleLogo4.png') }}" class="img-fluid w-100" alt="...">
<div class="overlay">
<div class="text w-100 h-100 overlay-content px-3 py-4">
<div class="fs-4">
{{-- Some text --}}
</div>
{{--
<div style="display: flex; justify-content: flex-end;">
<a href="{{ route('xdsoft.thietke')}}">
<div class="bg-145982 text-white p-2">Xem thêm</div>
</a>
</div> --}}
</div>
</div>
</a>
</div>
正如您所看到的,当我将鼠标悬停在图像上时,白色背景会滑动,里面的内容就可见。我想让它延迟1秒。你能帮助我吗?谢谢。
我希望这就是您正在寻找的。
请更改照片的 URL。我用的是网上的一个。
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.9);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
transition-delay: 1s;
/* Set Delay Duration */
}
.dv-each:hover .overlay {
transition: .5s ease-in-out;
width: 100%;
transition-delay: 0s;
}
.overlay-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
opacity: 0;
transition: opacity 1s ease;
.dv-each:hover .overlay-content {
opacity: 1;
}
<div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-each position-relative h-75">
<a href="{{ route('xdsoft.tintuc')}}">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" class="img-fluid w-100" alt="...">
<div class="overlay">
<div class="text w-100 h-100 overlay-content px-3 py-4">
<div class="fs-4">
Text Displayed after Delay
</div>
<div style="display: flex; justify-content: flex-end;">
<a href="{{ route('xdsoft.thietke')}}">Text Displayed after Delay
<div class="bg-145982 text-white p-2"></div>
</a>
</div>
</div>
</div>
</a>
</div>
将背景图像、叠加层和叠加内容视为三个相互堆叠的独立层。然后就这样编码。
在您的
:hover
规则中,将 transition-delay
设置为悬停开始时所需的延迟,然后在基本规则中将 transition-delay
设置为悬停结束时所需的延迟。
.d1 {
position: relative;
height: 100px;
margin-bottom: 20px;
}
.i1, .overlay, .content {
position: absolute;
}
.i1, .overlay {
top: 0;
left: 0;
height: 100%;
}
.i1 {
width: 100%;
object-fit: cover;
object-position: center;
}
.overlay {
width: 0;
background-color: rgba(255, 255, 255, 0.9);
transition: .5s .5s ease; /* delay when overlay is removed */
}
.d1:hover .overlay {
width: 100%;
transition: .5s ease; /* no delay when overlay is added */
}
.content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
opacity: 0;
transition: .5s ease; /* no delay when content is removed */
}
.d1:hover .content {
opacity: 1;
transition: .5s .5s ease; /* delay when content is added */
}
<div class="d1">
<img class="i1" src="https://picsum.photos/1000/200">
<div class="overlay"></div>
<div class="content">Content appears</div>
</div>
<div class="d1">
<img class="i1" src="https://picsum.photos/1000/200">
<div class="overlay"></div>
<div class="content">Content appears</div>
</div>