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