如何使用 CSS 在圖像懸停上創建帶有文字和圖標的深色疊加效果？

使用CSS 在影像上建立疊加效果

在本文中，我們將探討如何實現文字的深色疊加效果以及使用CSS將滑鼠懸停在圖像上時的圖示。

問題：

您的目標是建立一個互動式影像庫，其中滑鼠懸停在影像上會顯示帶有自訂的深色疊加層內容，如所提供的圖像所示。挑戰在於如何在寬度一致的情況下實現不同高度的影像效果。

解決方案：

為了實現這一點，我們結合使用了HTML 和CSS如下：

HTML 標記：

`

<img  src="/static/imghwm/default1.png" data-src="image-url" class="lazy" alt="如何使用 CSS 在圖像懸停上創建帶有文字和圖標的深色疊加效果？" >
<div class="after">This is some content</div>

> ;`

CSS 樣式規則：

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}</fixed></code>

在此程式碼中，.image-container 用作映像和覆蓋div 的包裝器。 .after 的定位可確保覆蓋層覆蓋整個影像，而條件顯示屬性使覆蓋層僅在懸停時可見。您可以透過修改 .after div 中的背景顏色和內容來自訂疊加層的外觀。

自訂：

提供的解決方案作為基本模板，您可以透過添加額外的 CSS 規則來增強其美觀性。例如，您可以在疊加層內垂直對齊內容、變更圖示樣式或包含過渡屬性以實現更平滑的懸停動畫。

以下是帶有額外樣式的修改範例：

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}</code>

在此更新的程式碼中，覆蓋內容位於底部並居中對齊。此外，還添加了縮放圖標，該圖標在懸停時會改變顏色。這些客製化展示了所提供解決方案的靈活性，並使您能夠創建客製化的圖像疊加。

以上是如何使用 CSS 在圖像懸停上創建帶有文字和圖標的深色疊加效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！