Подробнее читайте в миниатюре изображения

Очень и очень быстро я сделал образец кода, возможно, вам нужно исправить 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')
);

Вот идея

Скриншот:

Надеюсь на помощь, скажите, если вам что-нибудь понадобится!

Простым решением для этого может быть использование CSS и отказ от компонентов реакции-начальной загрузки вместе. Что-то в этом роде может сработать для вас:

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>