如何在CSS中覆盖图像

我试图实现这样的事情:

我试图实现这样的事情:

this effect

当我将鼠标悬停在图像上时,我想用一些文本和图标将该图像置于这种深色。

我被困在这里。我找到了一些教程,但他们没有为这种情况工作。另外,另一个问题-每个图像都有不同的高度。宽度总是相同的。

如何达到这种效果?

138

你可以用这个简单的 CSS / HTML 实现这一点:

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML格式

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>
Demo:http://jsfiddle.net/6Mt3Q/

UPD:这是一个很好的最终演示,有一些额外的样式。

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>
40

你可以使用一个伪元素,并在悬停你的形象:

.image {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
}
.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url(http://lorempixel.com/300/200);
  background-size: 100% 100%;
}
.image:hover:before {
  opacity: 0.8;
}
<div class="image"></div>
38

把这个答案放在这里,因为它是谷歌的结果。

如果你想要一个快速和简单的方法:

    filter: brightness(0.2);

* 与 IE 不兼容

20

有点晚了,但这个线程出现在谷歌作为搜索覆盖方法时的最高结果。

您可以简单地使用background-blend-mode

.foo {
    background-image: url(images/image1.png), url(images/image2.png);
    background-color: violet;
    background-blend-mode: screen multiply;
}

这是什么,它需要第二个图像,并通过使用多重混合模式将其与背景颜色混合,然后通过使用屏幕混合模式将第一个图像与第二个图像和背景颜色混合。

乘法,屏幕,叠加,变暗,变亮,颜色闪避,颜色烧伤,硬光,柔光,差异,排除,色调,饱和度,颜色和亮度。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(87)
'时间倒退' xkcd
上一篇
@ react-native-voice/voice不适用于最新的博览会
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(24条)