如何使用HTML和CSS为图像添加彩色叠加效果

Question

我正在尝试为网页上的每个图像添加叠加效果。基本上，将光标移到图像上时，它会稍微改变颜色。然而，没有发生期望的效果。解决此问题的最佳方法是什么？

这是该网页的上下文图片。

HTML

$files = $this->request->files;
$files = $files->get('my_file');
foreach ($files as $file) {
    \Log::Info(var_dump_safe($file->getClientOriginalName()));
}

CSS

    <div class="service-box">
        <div class="single-service">
            <img src="images/facials.PNG">
            <div class="overlay"></div>
        </div>
        <div class="single-service">
            <img src="images/skin_solutions.PNG"> 
            <div class="overlay"></div>  
        </div>
        <div class="single-service">
            <img src="images/lash.PNG">
            <div class="overlay"></div> 
        </div>
        <div class="single-service">
            <img src="images/microblading.PNG">
            <div class="overlay"></div> 
        </div>
        <div class="single-service">
            <img src="images/eyebrow_treatment.PNG">
            <div class="overlay"></div> 
        </div>
    </div>

Answer 1

将鼠标悬停在上面可使图像透明60％。

  img:hover {
    background: linear-gradient(rgba(0,0,0,0.5),#93dced);
    opacity: 60%;
    transition: 1s;}

Answer 2

您的代码运行良好，但是在.overlay类的css中存在技术错误。您在;之后跳过了width: 100%，却在:之间错过了height: 100%。

应该是这样的：

.overlay{
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    border-radius: 7px;
    cursor: pointer;
    background: linear-gradient(rgba(0,0,0,0.5),#93dced);
    opacity: 0;
    transition: 1s;
}