如何在 CSS 中实现此图像悬停效果：深色叠加 + 图像增长 + 标题？答案

【问题标题】：How to do this image hover effect in CSS : dark overlay + image grow + title on it?如何在 CSS 中实现此图像悬停效果：深色叠加 + 图像增长 + 标题？
【发布时间】：2022-02-02 18:06:26
【问题描述】：

有谁知道如何在 css 中对悬停在图像上的以下效果进行操作（深色叠加 + 图像增长 + 出现在其上的名称）：https://drive.google.com/file/d/1zP5gRnI7BZIO-ajHSrZg2LnNhZCJ_f5F/view?usp=sharing

非常感谢:)

【问题讨论】：

请问您可以将您当前的代码添加到问题中吗？

标签： css hover overlay

【解决方案1】：

我的做法是围绕img标签创建包装元素

<div class="img-container">
    <img src="./images/img.png" alt="foo" />
</div>

然后应用类似的样式

.img-container {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.img-container:hover .overlay {
    opacity: 1;
}
.img-container:hover img{
    transform: scale(1.2);
}
.img-container::before {
    content: "Hello";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background-color: rgba(175, 175, 175, 0.425);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
img {
    transition: transform 0.3s;
}

希望对您有所帮助；）

【讨论】：

【解决方案2】：

您可以创建一个父元素附加图像元素或使用::after 选择器：

img {
  position: relative;
}
img:hover {
  /* grow image here */
}
img:hover::after {
  contents: "FLUO";
  display: flex;
  background-color: rgba(0, 0, 0, 50%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}

或者使用background-image 属性来增加你的形象：

img {
  background-image: url("/path/to/your/image.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
img:hover {
  background-size: 120%;
}

【讨论】：