Javascript 阅读更多图片缩略图

我试图在图像上添加一种效果，当用户将鼠标放在图像上时，会显示一个写着“阅读更多”的按钮

比如：

但我不知道如何用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

let { Grid, Row, Col, Image,Overlay,Button,Tooltip } = ReactBootstrap;

function CustomPopover({ className, style }) {
  return (
    <div
      className={className}
      style={{
        ...style,
        position: 'absolute',
        backgroundColor: '#EEE',
        boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
        border: '1px solid #CCC',
        borderRadius: 3,
        marginLeft: -5,
        marginTop: 1,
        padding: 10

      }}
    >
      <strong>Read More</strong>
      </div>

  );
}


class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.getTarget = this.getTarget.bind(this);
    this.handleMouseOver = this.handleMouseOver.bind(this);

    this.handleMouseOut = this.handleMouseOut.bind(this);

    this.state = {
      show: false
    };
  }

  getTarget() {
    return ReactDOM.findDOMNode(this.target);
  }

  handleMouseOut() {
    this.setState({ show: false});
  }

  handleMouseOver() {
    this.setState({ show: true});
  }

  render() {
    const sharedProps = {
      container: this,
      target: this.getTarget,
      show: this.state.show
    };

    return (

<Grid>
  <Row>
    <Col xs={6} md={3}>
        <Image ref={button => {
            this.target = button;
          }} onMouseOut={this.handleMouseOut}
          onMouseOver={this.handleMouseOver}src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/los-5-libros-que-obama-te-recomienda-leer-para-lo-que-resta-de-verano-1534782301.jpg" responsive />

        <Overlay {...sharedProps} placement="bottom">
          <CustomPopover />
        </Overlay>

      </Col>
  </Row>
</Grid>
    );
  }
}

ReactDOM.render(
  <Example />, 
  document.getElementById('app')
);

let{Grid，Row，Col，Image，Overlay，Button，Tooltip}=ReactBootstrap；
函数CustomPopover（{className，style}）{
返回(
阅读更多信息
);
}
类示例扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.getTarget=this.getTarget.bind（this）；
this.handleMouseOver=this.handleMouseOver.bind（this）；
this.handleMouseOut=this.handleMouseOut.bind（this）；
此.state={
节目：假
};
}
getTarget（）{
返回ReactDOM.findDOMNode（this.target）；
}
handleMouseOut（）{
this.setState（{show:false}）；
}
handleMouseOver（）{
this.setState（{show:true}）；
}
render（）{
常量sharedProps={
集装箱:这个,，
目标：this.getTarget，
show:this.state.show
};
返回(
{
this.target=按钮；
}}onMouseOut={this.handleMouseOut}
onMouseOver={this.handleMouseOver}src=”https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/los-5-libros-que-obama-te-recomienda-leer-para-lo-que-resta-de-verano-1534782301.jpg“响应性/>
);
}
}
ReactDOM.render(
, 
document.getElementById（'app'）
);

截图：

---

希望能帮上忙，如果需要什么请告诉我

一个简单的解决方案可能是使用CSS，并避免同时使用react引导组件。以下几点可能适合您：

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>

或者，这里有一个工作示例（有一些小的修改）：

.hover包装器{
位置：相对位置；
显示：内联块；
}
.悬停{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
不透明度：0；
}
.悬停{
不透明度：1；
}
.悬停{
背景：黑色；
颜色：白色；
填充：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;
}