Can't select child-elements in chrome dev tools anymore when using an image overlay (card-img-overlay)

Question

When using bootstrap's card-img-overlay class, I can't inspect child elements anymore using the chrome devtools. E.g. in the screenshot below, I am not able to select any of the headers anymore.

Am I using the class in a wrong way?

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"
import SEO from "../components/seo"
import Img from "gatsby-image"
import Card from "react-bootstrap/Card"
import TimeToRead from "../components/time-to-read"
import Tags from "../components/tags"

const SinglePost = ({ data, pageContext }) => {
  const { frontmatter } = data.markdownRemark
  const { timeToRead } = data.markdownRemark

  return (
    <Layout pageTitle={frontmatter.title}>
      <SEO title={frontmatter.title} />
      <Card>
        <Img
          className="card-image-top"
          style={{ maxHeight: "150px" }}
          fluid={frontmatter.image.childImageSharp.fluid}
        />
        <div className="card-img-overlay">
          <Tags tags={frontmatter.tags} />
        </div>
        <Card.Body>
          <Card.Title>{frontmatter.title}</Card.Title>
          <Card.Subtitle>
            <div className="d-flex justify-content-between">
              <span className="text-info">{frontmatter.date}</span>
              <TimeToRead minutes={timeToRead} />
            </div>
            <hr />
          </Card.Subtitle>
          <Card.Text
            dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
          ></Card.Text>
        </Card.Body>
      </Card>
    </Layout>
  )
}

Answer 1

Seem like, you can't access to the elements (and your users could not select the text) because the card-img-overlay is covering it. I have to say that this is how overlays should work. But if you need to prevent it anyway, you can use pointer-events: none.

Pay attention, when you do this, it blocks the events from all of its children too (In Chrome at least) so you need to enable it for the children.

.parent {
  position: relative;
}

.overlay {
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.overlay * {
  pointer-events: all;
}

<div class="parent">
  <div class="overlay">
    <button>Click</button>
  </div>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
</div>

https://jsbin.com/bariyipoha/1/edit?html,css,output