如何在 CSS 中覆盖图像? [英] How to make in CSS an overlay over an image?

问题描述

我正在努力实现这样的目标:

当我将鼠标悬停在图像上时，我想将带有一些文本和图标的深色置于该图像上.

我被困在这里.我找到了一些教程，但它们不适用于这种情况.另外，另一个问题——每个图像都有不同的高度.宽度始终相同.

怎么才能达到这个效果?

解决方案

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

.image-container {位置:相对；宽度:200px；高度:300px；}.image-container .after {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；显示:无；颜色:#FFF；}.image-container:hover .after {显示:块；背景:rgba(0, 0, 0, .6);}

HTML

<img src="http://lorempixel.com/300/200"/><div class="after">这是一些内容</div>

演示:http://jsfiddle.net/6Mt3Q/

<小时>

UPD:这是一个很好的最终演示，带有一些额外的样式.

.image-container {位置:相对；显示:内联块；}.image-container img {display: block;}.image-container .after {位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；显示:无；颜色:#FFF；}.image-container:hover .after {显示:块；背景:rgba(0, 0, 0, .6);}.image-container .after .content {位置:绝对；底部:0；字体系列:Arial；文本对齐:居中；宽度:100%；box-sizing: 边框框；填充:5px；}.image-container .after .zoom {颜色:#DDD；字体大小:48px；位置:绝对；顶部:50%；左:50%；边距:-30px 0 0 -19px;高度:50px；宽度:45px；光标:指针；}.image-container .after .zoom:hover {颜色:#FFF；}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="样式表"/><div class="image-container"><img src="http://lorempixel.com/300/180"/><div class="after"><span class="content">这是一些内容.它可以很长并且跨越几行.</span><span class="zoom"><i class="fa fa-search"></i></span>

I am trying to achieve something like this:

When I hover over an image, I would like to put on that image this dark color with some text and the icon.

I am stuck here. I found some tutorials but they didn't work out for this case. Also, another issue -- every image has a different height. The width is always the same.

How can this effect be achieved?

解决方案

You can achieve this with this simple 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: Here is one nice final demo with some extra stylings.

.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>

这篇关于如何在 CSS 中覆盖图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！