如何將動畫放在HTML/CSS代碼中的靜態圖像上？

Question

我試圖在網頁上放置一個靜態圖像（這是一些文本的圖片，想要保持此文檔的完整性）並在圖像頂部疊加動畫，例如將鼠標懸停在文本塊（來自靜態圖像）併爲文本塊提供附加上下文。我曾經使用懸停CSS，但我正在尋找其他解決方案，因爲當我放大頁面時，文本塊上方的框不會彼此對齊。先謝謝你。

Answer 1

如果您的主要問題是您的動畫/高光的定位，那麼解決的方法是使用相對於圖像的百分比（而不是像素）值來定位它們。

在下面的代碼片段中，我用<div>中的一些文字包含了一些圖片，寬度設置爲50％（因此如果調整瀏覽器窗口大小，它將調整大小）。圖像填充整個div，並且使用圖像上的百分比定位絕對定位的文本高亮。

調整窗口大小（或調整包含div的寬度css）時，圖像將更改大小，但高亮區仍應正確放置在文本上方。將鼠標懸停在圖片上方即可查看。

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