如何使用偽元素在圖片懸停上創建 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 */
}

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