javascript - 在图片缩略图中阅读更多内容

我正在尝试对图像进行效果处理，当用户将鼠标放在图像上时，将显示一个写为Read More ..的按钮。

就像是：



但是我不知道如何使用react-bootstrap
我试着看是否发生了什么，但是什么也没有：

<div>
  <div className="view overlay">
      <Thumbnail src={item.image} className="img-fluid " />
         <div className="mask flex-center rgba-red-strong">
              <p className="white-text">Super light overlay</p>
         </div>
  </div>
</div>

有什么帮助吗？谢谢！！

最佳答案

一个简单的解决方案可能是使用CSS，并避免一起使用react-bootstrap组件。这些路线可能对您有用：

HTML：

<div>
  <div className="view overlay hover-wrapper"> <!-- add hover-wrapper -->
   <Thumbnail src={item.image} className="img-fluid " />
   <div className="mask flex-center rgba-red-strong hover"> <!-- add hover -->
     <p className="white-text">Super light overlay</p>
   </div>
  </div>
</div>

CSS：

.hover-wrapper {
  position:relative;
  display:inline-block;
}

.hover {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
}

.hover:hover {
  opacity:1;
}

.hover p {
  background:black;
  color:white;
  padding:1rem;
}

或者，这是一个工作示例（进行了一些小的修改）：

.hover-wrapper {
  position:relative;
  display:inline-block;
}

.hover {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
}

.hover:hover {
  opacity:1;
}

.hover p {
  background:black;
  color:white;
  padding:1rem;
}

<div>
  <div class="view overlay hover-wrapper">
        <img src="https://via.placeholder.com/350x350" className="img-fluid " />
         <div class="mask flex-center rgba-red-strong hover">
              <p class="white-text">Super light overlay</p>
         </div>
  </div>
</div>

关于javascript - 在图片缩略图中阅读更多内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52960142/