我想在悬停的图像上创建一个黑色透明的叠加,并将文本居中。有点像Instagram在这里听到的每张图片(悬停在图片上)
我试过这样做:
.parent {
position: relative;
background: black;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
.child p {
text-align: center;
color: white;
font-size: 1.2em;
}
.child:hover {
visibility: visible;
opacity: 4;
}
<div class="parent">
<img src="someimageurl">
<div class="child">
<p>some text</p>
</div>
</div>
这已经惨败了。请注意,该解决方案还应适用于视频标签。
尝试如下:
- 给你的容器一个相对位置
- 将
display: flex;
、justify-content: center;
、align-items: center;
和position: absolute;
分配到您的模态 隐藏覆盖使用
background-color: rgba(0, 0, 0, 0);
和显示它与background-color: rgba(0, 0, 0, 0.5);
悬停。(使用rgba()
不会分配文本的不透明度,这就是为什么你应该使用它的不透明度)隐藏文本,你可以使用visibility: hidden;
和visibility: visible;
来显示它。.container {
width: 300px;
height: 300px;
position: relative;
font-family: Helvetica,sans-serif;
}
img {
background-color: red;
width: 300px;
height: 300px;
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0);
visibility: hidden;
}
.container:hover > .overlay {
background-color: rgba(0, 0, 0, 0.5);
visibility: visible;
}
<div class="container">
<img src="https://i.stack.imgur.com/Zw1MI.jpg"/>
<div class="overlay">Darth Maul</div>
</div>
您可以考虑渐入式和滑下式的变化。运行下面的代码片段。
.child p {
width: 100%;
text-align: center;
font-size: 1.2em;
margin: auto;
top: 45%;
position: absolute;
}
.child {
position: absolute;
right: 0;
left: 0;
visibility: hidden;
color: transparent;
top: 0;
bottom: 0;
max-width: 100%;
max-height: 300px;
display: block;
vertical-align: middle;
transition: .7s;
}
.parent {
position: relative;
width: auto;
display: block;
max-width: 300px;
overflow: hidden;
}
.parent:hover .child {
visibility: visible;
opacity: .4;
background: black;
color: white;
}
.parent:hover .child.slide-down {
top: 0;
}
.child.slide-down {
top: -500px;
}
<div class="parent">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="child">
<p>some text</p>
</div>
</div>
<div class="parent">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="child slide-down">
<p>some text</p>
</div>
</div>
我认为一个简单的方法是让图像"cover"已经在那里,但隐藏,直到鼠标悬停:
#parentdiv { background-image:url('myimage.jpg'); }
#parentdiv div { width:100%; height: 100%; opacity:0.2; background: #000; text-align:center; display: none; }
与HTML一样
<div id="parentdiv">
<div><!-- text icons in here --></div>
</div>
和javascript:
document.getElementById("parentdiv").addEventListener("mouseover", function () {
this.children[0].style.display = 'block';
});
和鼠标移出:
document.getElementById("parentdiv").addEventListener("mouseout", function () {
this.children[0].style.display = 'none';
});