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

Question

我正在尝试对图像施加效果，当用户将鼠标放在图像上时，会显示一个写着阅读更多 .. 的按钮。

类似于:

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

有什么帮助吗？谢谢!!

Answer 1

非常非常快我做了一个代码示例，可能你必须修复 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')
);

Here an idea

截图:

希望能帮到你，如果你需要什么，请告诉我!