与Material-ui卡媒体反应，点击添加叠加

Question

Its possible to add a opaque colored overlay in plain HTLM, CSS and JavaScript to an image but with Material-UI I'm having some problems.

<Card>
   <CardMedia>
      <img alt="" src={this.props.Webpull} />
   </CardMedia>    
</Card>

This will add a card and inbed an a image into it.

How can I add an overlay on-top of the image rgb(0,0,255,0.3) when I click on it, and have the overlay stay forever?

Thanks!

Answer 1

If I understood the problem right, this is the solution you were looking for. The component is wrapped in a div that has another div with a class of layer .

class MyCard extends React.Component {
  imageClick = () => {
    this.refs.layer.style.display = "block";
  };
  render() {
    const { classes } = this.props;
    return (
      <Card>
        <div className="cardWrapper" onClick={this.imageClick}>
          <CardMedia
            alt="My cool img"
            component="img"
            className={classes.media}
            image="https://placeimg.com/100/100/nature"
          />
          <div className="layer" ref="layer">
            New layer
          </div>
        </div>
      </Card>
    );
  }
}

...and CSS...

.cardWrapper {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.layer {
  position: absolute;
  background-color: rgba(0, 0, 255, 0.3);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
}

The layer will stay forever as you wanted.

Example