React with Material-ui card media, add overlay on click

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!

You can add a `onClick` to the `img` element and add a class to it. In the newly added class, make use of `before` or `after` pseudo element and show an overlay. — Panther, Aug 26 '17 at 18:09
rgb(0,0,255,0.3) is not a valid RGB value, it is actually rgba. will throw a warning if src or image are omitted. So your starting point should be something like this: https://codesandbox.io/s/7o29l6mk21 @Panther [pseudoelements don't really work well with inline elements such as images](https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements/5843164#5843164). — Antonija Šimić, Dec 12 '18 at 15:51

score 2 · Answer 1 · answered Dec 14 '18 at 14:38

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

React with Material-ui card media, add overlay on click

1 Answers1