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

Question

Я пытаюсь наложить эффект на изображение, из которого, когда пользователь наводит курсор мыши на изображение, отображается кнопка с надписью Подробнее ...

Что-то вроде:

Но я не знаю, как это сделать с реакции-бутстрапом. Я пытался это проверить, если что-то случится, но ничего:

<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 и избегание всех компонентов response-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>

Answer 2

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

Вот идея

Снимок экрана:

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