如何使用偽元素在圖片懸停上創建 CSS 不可見黑色疊加？

CSS 懸停時不可見的黑色疊加

使用純CSS 確實可以在懸停時在圖像上實現透明的黑色疊加。但是，由於定位和可見性問題，初始程式碼範例中提到的涉及使用覆蓋 div 的方法可能不適合。

更有效的解決方案涉及使用偽元素。它的工作原理如下：

CSS 代碼

.image {
  position: relative;
  /* Set dimensions as needed (or omit for responsiveness) */
  width: 400px;
  height: 400px;
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A'; /* Pseudo content to trigger browser rendering */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); /* Black with 60% opacity */
  opacity: 0; /* Initially invisible */
  transition: all 1s; /* Animation transition */
}

.image:hover:after {
  opacity: 1; /* Shows overlay on hover */
}

說明

說明我們將子 img 元素設定為寬度為 100% 並垂直對齊到頂部。
1. 偽元素-element (.image:after) 絕對定位在圖片 div 內。它最初的不透明度為 0，使其不可見。
2. 懸停 (.image:hover:after) 時，偽元素的不透明度變更為 1，使其可見並有效建立黑色疊加層。

額外功能

文字新增：要將文字加入懸停時的疊加層，您可以使用偽元素樣式中的content 屬性。例如：

.image:after {
  content: 'Hover Text...'; /* Custom overlay text */
}

自訂：您可以調整不透明度和過渡速度來修改可見度效果。此外，您可以新增背景影像或漸層來建立更複雜的疊加層。

以上是如何使用偽元素在圖片懸停上創建 CSS 不可見黑色疊加？的詳細內容。更多資訊請關注PHP中文網其他相關文章！