FIDDLE

Question

我试图在我的图像上创建悬停状态，使用bootstap

使图像变暗

虽然不是覆盖包括白色边框的整个图像，但我希望它保留在白色边框内。

我似乎无法站在正确的位置。一旦我添加高度和百分比，当响应屏幕宽度时，过度状态不会保留在原位。他们被挤出图像。

有人可以帮忙吗？

这是代码

http://bootply.com/90238

Answer 1

FIDDLE

您需要更改.caption类 - 它当前正在使用百分比值来计算填充，这样可以根据此难度确定元素大小。将其更改为像素值，然后将元素顶部，右侧，底部，左侧偏移相同的量（-1px以补偿您的边框）。这意味着您的所有缩略图都具有一致的白色边框，并删除任何基于百分比的尺寸文件。

.caption {
    position:absolute;
    top:4px;
    left:4px;
    right:4px;
    bottom:4px;
    background:rgba(66, 139, 202, 0.75);
    padding:5px;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

Answer 2

我发现你可以这样做的方式是这样的。更改.caption width和height，然后将整个内容置于中心位置。

CSS：

.caption {
    position:absolute;
    top:2%;
    background:rgba(66, 139, 202, 0.75);
    width:97%;
    height:96%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

注意： 快速查看后使用%固定的宽度和高度并不完美，然后这样就可以了。

图像上的Jquery颜色叠加

2 个答案:

FIDDLE

CSS：