![this this](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何在 CSS 中覆盖图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在努力实现这样的目标:
当我将鼠标悬停在图像上时,我想将带有一些文本和图标的深色置于该图像上.
我被困在这里.我找到了一些教程,但它们不适用于这种情况.另外,另一个问题——每个图像都有不同的高度.宽度始终相同.
怎么才能达到这个效果?
解决方案
你可以用这个简单的 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>
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>
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 中覆盖图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!