twitter-bootstrap 使用 Bootstrap 4 用文本覆盖图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49354906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay Image with text with Bootstrap 4
提问by loganrussell48
I'm very new to web development so have mercy with your responses.
我对 Web 开发很陌生，所以请对您的回答有所怜悯。
I have a grid of images that I want to modify. When the mouse hovers over an image, I want an overlay with text to appear over the image (this may require the cell in the grid to expand to contain all the text).
我有一个要修改的图像网格。当鼠标悬停在图像上时，我希望在图像上出现一个带有文本的叠加层（这可能需要网格中的单元格展开以包含所有文本）。
When the image with the overlay is clicked, it should open a modal (I already have this working) with the full text and info inside.
单击带有叠加层的图像时，它应该打开一个包含全文和信息的模式（我已经有了这个工作）。
All changes need to look smooth with transitions (overlay shouldn't just bethere when the mouse touches, it should animate in, etc.) when they enter/exit.
所有变化需要寻找与过渡平滑（覆盖不应该仅仅是有当鼠标触摸，它应该在动画等），当他们进入/退出。
I'm not sure what the right terminology is for this, so I'm struggling to find info searching on Google. So, if you could provide me with some resources to learn this, or provide some examples, it'd be much appreciated. Thanks in advance :)
我不确定这方面的正确术语是什么，所以我正在努力寻找在 Google 上搜索的信息。因此，如果您能为我提供一些资源来学习这一点，或提供一些示例，将不胜感激。提前致谢 ：）
Edit: Here's close to what I want to happen
There will be an image, like this:
编辑：这里接近我想要发生的事情会有一个图像，像这样：
After the mouse hover over this image, an overlay should animate in to look like this: 
鼠标悬停在此图像上后，叠加层应具有动画效果，如下所示：
The difference between this and what I want, is I want to show text instead of an icon, and I also want the cell in the grid upon which the mouse is hovering to expand to more pleasantly present the text that will be shown on the overlay.
这与我想要的区别在于，我想显示文本而不是图标，并且我还希望鼠标悬停在其上的网格中的单元格展开以更愉快地呈现将显示在叠加层上的文本.
回答by Steve K
You can do this with just css first you need to wrap your image in a div and set the position to relative. Then place the image and the overlay inside of it. Then you can use css transitions to achieve the desired effect. You will set the original opacity of the overlay to 0 and set the hover opacity to 1. Below is an example. Since you haven't posted any code I can't tell what your markup will be so I just made an example.
您可以先使用 css 执行此操作，您需要将图像包装在 div 中并将位置设置为相对位置。然后将图像和叠加层放在其中。然后就可以使用css过渡来达到想要的效果了。您将覆盖的原始不透明度设置为 0，并将悬停不透明度设置为 1。下面是一个示例。由于您还没有发布任何代码，我无法确定您的标记是什么，所以我只是举了一个例子。
.img-container{
position:relative;
display:inline-block;
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>回答by Montaycabe
Set image as "block"
将图像设置为“块”
.img-container{
position:relative;
display:inline-block;
}
.img-container img{
display:block
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>回答by lacostenycoder
Sounds like you're looking for tooltip, see https://getbootstrap.com/docs/4.0/components/tooltips/
听起来您正在寻找工具提示，请参阅 https://getbootstrap.com/docs/4.0/components/tooltips/
