如何在图像上创建具有居中文本的黑色透明叠加图/模式对话框

Question

我想在悬停的图像上创建一个黑色透明叠加图层，并且居中显示文字。排序如何Instagram的它与每个图像here（悬停在图片）

我试图做这样的事情听：

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

这已经悲惨地失败了。请注意，解决方案还应该与视频标签一起工作。

Answer 1

尝试以下操作：

1. 给您的容器中的相对位置。
2. 分配display: flex;justify-content: center;​​和position: absolute;到您的模态。
3. 使用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="http://i.stack.imgur.com/Zw1MI.jpg"/> 
 
    <div class="overlay">Darth Maul</div> 
 
</div>

Answer 2

我想一个简单的方法来做到这一点是有像“盖”已经存在，但隐藏，直到鼠标悬停：

#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'; 
}); 

Answer 3

淡入，你可以考虑滑动下来的变化。运行下面的代码片段。

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