如何僅使用 CSS 建立圖片懸停疊加？-css教學-PHP中文網

如何僅使用 CSS 建立圖片懸停疊加？

Linda Hamilton

發布： 2024-12-15 09:32:13

原創

418 人瀏覽過

How Can I Create Image Hover Overlays Using Only CSS?

使用純CSS 實作影像懸停疊加

使用HTML 和CSS，當滑鼠懸停在影像上時，您可以向影像添加透明的黑色疊加層它。若要在不使用覆蓋元素的情況下實現此目的，請考慮使用偽元素。

用

包裹圖片element:

<div class="image">
  <img src="image.jpg">
</div>

登入後複製

為.image 指定相對定位和可選尺寸：

.image {
  position: relative;
  width: 200px;  /* Optional */
  height: 200px;  /* Optional */
}

登入後複製

將子img 元素設定為寬度100% 並垂直對齊。

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

登入後複製

建立一個偽元素來顯示疊加層：

.image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1s;
}

登入後複製

讓懸停時可見疊加層：

.image:hover:after {
  opacity: 1;
}

登入後複製

現在，當遊標懸停在影像上時，透明的黑色疊加層將平滑淡入。

以上是如何僅使用 CSS 建立圖片懸停疊加？的詳細內容。更多資訊請關注PHP中文網其他相關文章！