호버 오버레이 전후에 지연된 콘텐츠 추가
P粉731861241
2023-08-02 17:34:53
<p>div 위로 마우스를 가져가면 왼쪽에서 오른쪽으로 미끄러지는 오버레이가 생기고 1초 후에 콘텐츠가 표시되기를 원합니다. 이것은 내 HTML 코드입니다: </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">/* 오버레이 */
.오버레이 {
위치: 절대;
하단: 0;
왼쪽: 0;
오른쪽: 0;
배경색: rgba(255, 255, 255, 0.9);
오버플로: 숨김;
너비: 0;
높이: 100%;
전환: 0.5초 용이성;
}
.dv-each:hover .overlay {
/* 전환 지연: 0.4초 */
전환: 0.5초 Ease-In-Out;
너비: 100%;
}
.overlay-content {
위치: 절대;
최고: 50%;
왼쪽: 50%;
-webkit-transform: 번역(-50%, -50%);
-ms-변환: 번역(-50%, -50%);
변환: 변환(-50%, -50%);
공백: nowrap;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-각 위치 기준 h- 75">
<a href="{{ 경로('xdsoft.tintuc')}}">
<img src="{{ 자산('image/TrangChu/lectangleLogo4.png') }}" class="img-fluid w-100" alt="...">
<div class="오버레이">
<div class="text w-100 h-100 overlay-content px-3 py-4">
<div class="fs-4">
{{-- 일부 텍스트 --}}
</div>
{{--
<div style="display: flex; justify-content: flex-end;">
<a href="{{ 경로('xdsoft.thietke')}}">
<div class="bg-145982 text-white p-2">Xem 항목</div>
</a>
</div>
</div>
</div>
</a>
<p><br /></p>
<p>이미지 위로 마우스를 가져가면 흰색 배경 슬라이드가 나타나고 내부 콘텐츠가 표시됩니다. 표시를 1초 지연시키고 싶습니다. 도와주세요? 감사해요. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이것이 당신이 찾고 있는 것이기를 바랍니다.
사진 URL을 변경해주세요. 인터넷에서 찾은 사진을 사용했어요.