使用Bootstrap 4将图像与文本叠加

ddarikpa 于 2023-03-16 发布在 Bootstrap

关注(0)|答案(4)|浏览(229)

我是非常新的网络开发，所以有怜悯与您的React。
我有一个要修改的图像网格。当鼠标悬停在图像上时，我希望在图像上显示带有文本的覆盖层（这可能需要扩展网格中的单元格以包含所有文本）。
当图像与覆盖被点击，它应该打开一个模态（我已经有这样的工作）与全文和信息内。
所有的变化需要看起来平滑的过渡（覆盖不应该只是 * 在 * 那里时，鼠标触摸，它应该动画，等等），当他们进入/退出。
我不知道什么是正确的术语，所以我很难找到信息搜索谷歌。所以，如果你能提供我一些资源来学习这一点，或提供一些例子，这将是非常感谢。提前感谢：）
编辑：这是接近我想要发生的将有一个图像，像这样：x1c 0d1x
鼠标悬停在该图像上后，覆盖层应动画显示如下：

这与我想要的不同之处在于，我想要显示文本而不是图标，并且我还希望鼠标悬停的网格中的单元格能够扩展，以更愉快地呈现将在覆盖图上显示的文本。

twitter-bootstrap

来源：https://stackoverflow.com/questions/49354906/overlay-image-with-text-with-bootstrap-4

4条答案

按热度按时间

vqlkdk9b1#

你可以用css来实现这个功能，首先你需要把你的图像 Package 成一个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>

赞(0）回复(0）举报 2023-03-16

siv3szwd2#

将图像设置为“块”

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

赞(0）回复(0）举报 2023-03-16

pzfprimi3#

听起来像是在寻找工具提示，请参见https://getbootstrap.com/docs/4.0/components/tooltips/

赞(0）回复(0）举报 2023-03-16

xlpyo6sf4#

尝试使用以下css管理“简单覆盖文本”、“仅在悬停事件时显示覆盖文本”、“使用Bg简单覆盖”

.img-container {
    position: relative;
    display: inline-block;
}

.img-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-container .overlay.overlay-bg:not(.hover-overlay) {
    background: rgba(0, 0, 0, 0.35);
}

.img-container .overlay.hover-overlay {
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.img-container:hover .overlay.hover-overlay {
    opacity: 1;
}

.overlay span {
    position: absolute;
    color: #fff;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<body>
    <div class="container">
      <div class="row">
        <div class="col-6"> 
          <span>simple overlay text</span>
          <div class="img-container">
            <img src="http://via.placeholder.com/300x300" class="img-thumbnail">
            <div class="overlay align-items-end">
              <span class="text-danger mb-2">overlay content</span>
            </div>
          </div>
        </div>
        <div class="col-6">    
          <span>simple overlay text with Bg</span>
          <div class="img-container">
            <img src="http://via.placeholder.com/300x300" class="img-thumbnail">
            <div class="overlay overlay-bg">
              <span>overlay content</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-6">    
          <span>on hover overlay text</span>
          <div class="img-container">
            <img src="http://via.placeholder.com/300x300" class="img-thumbnail">
            <div class="overlay hover-overlay">
              <span>overlay content</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

赞(0）回复(0）举报 2023-03-16

我来回答

使用Bootstrap 4将图像与文本叠加

4条答案

相关问题

热门标签

最新问答