Question

我有一个很好的引导程序。在井内，我有一个缩略图。我想要做的是每当我将鼠标悬停在图像上时，我希望在图像的顶部有黑色覆盖图，例如RGBA（0,0,0,0.5）。目前，这就是我所拥有的：

你可以看到我的Codepen上的实际代码和当前输出（它有点冗长）：click here for what I currently have

从笔中可以看到，当我将鼠标悬停在图像上时，会发生叠加，但低于实际图像，而不是图像。理想情况下，我希望这种方式可以让我调整屏幕大小，例如对于手机，叠加层应与图像保持成比例。我试过媒体查询，但这是一个非常糟糕的主意。如何使叠加层位于图像的顶部，从而摆脱井底部的多余空间？

Answer 1

要执行此操作，您可以将其父级的显示设置为relative，并将图像和叠加层添加到位置absolute和左上角0;将叠加层不透明度设置为0，然后将鼠标悬停设置为.5

    .parent{
    position:relative;
    width:100px;
    height:100px;
    }

.parent img, .parent .overlay{
position:absolute;
left:0;
top:0;
width:100px;
height:100px;
}

.parent .overlay{opacity:0;}
.parent .overlay:hover{opacity:.5;}

而html将是：

<div class="parent">
    <img src="image.png" />
    <div class="overlay">
</div>

但是我推荐另一个解决方案，你只需给它的父黑色背景，并在悬停时将图像的opacoty设置为.5：

.parent{backgound:#000;}
.parent img:hover{opacity:.5}

和html：

<div class="parent">
    <img src="image.png" />
</div>

在井中悬停时，将叠加添加到Bootstrap缩略图图像

1 个答案: