HTML/CSS 코드로 정적 이미지 위에 애니메이션을 배치하려면 어떻게해야합니까?

Question

웹 페이지에 정적 이미지를 놓으 려합니다 (일부 텍스트 그림은이 문서의 무결성을 유지하려고합니다). 그리고 이미지 위로 오버레이 애니메이션을 오버레이합니다. 텍스트 블록 (정적 이미지에서)을 선택하고 텍스트 블록에 추가 컨텍스트를 제공합니다. 나는 CSS를 위해 마우스 오버를 사용했지만 다른 솔루션을 찾고 있는데, 왜냐하면 내가 페이지를 확대하면 텍스트 블록 위에 상자가 서로 정렬되지 않기 때문이다. 미리 감사드립니다.

Answer 1

주요 문제점은 애니메이션/하이라이트의 위치가 문제가되는 경우 수정하는 방법은 이미지와 관련된 비율 (픽셀이 아닌) 값을 사용하여 위치를 지정하는 것입니다.

아래 스 니펫에서는 폭이 50 %로 설정된 <div> 텍스트로 이미지를 묶었습니다 (브라우저 창의 크기를 조정하면 크기가 조정됩니다). 이미지는 전체 div를 채우고 절대적으로 배치 된 텍스트 하이라이트는 이미지의 백분율을 사용하여 배치됩니다.

창의 크기를 조정하거나 포함 된 div의 너비를 조정하면 이미지의 크기는 변경되지만 강조 표시는 텍스트 위에 올바르게 배치되어야합니다. 볼 이미지 위로 마우스를 이동하십시오.

.imageholder { 
 
    width: 50%; 
 
    position: relative; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.highlightrect { 
 
    position: absolute; 
 
    top: 35%; 
 
    height: 28%; 
 
    left: 26%; 
 
    width: 44%; 
 
    border: 3px solid orange; 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 

 
.imageholder:hover .highlightrect { 
 
    opacity: 1; 
 
}

<div class="imageholder"> 
 
    <img src="http://via.placeholder.com/350x150" /> 
 
    <div class="highlightrect"></div> 
 
</div>