pointer-events

What

How to click, tap or select one HTML object through another.

For example: I had an image and I wanted to show a caption and a link to the photographer on hover, but I also wanted the image to be clickable to open a bigger version in a modal/lightbox. pointer-events makes that possible.

How

Example HTML
<div class="item-wrapper">
    <figure>
        <a href="/big-image.jpg"><img src="/small-image.jpg" /></a>
    </figure>
    <div class="item-info">
        <h1>Title of the Image</h1>
        <p class="img-credit">by <a href="https://link-to-artist.com">Name of Artist</a></p>
    </div>
</div>

Example CSS
.item-wrapper {
	box-sizing: border-box;
	height: 225px;
	position: relative;
	width: 300px;
}
figure,
h1 {
	margin: 0;
}
.item-info {
	bottom: 0;
	box-sizing: border-box;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	left: 0;
	padding: 1rem;
	pointer-events: none; /* keeps the image clickable */
	position: absolute;
	right: 0;
	top: 0;
}
.img-credit {
	margin-bottom: 0;
	pointer-events: auto; /* makes the link clickable */
}
.item-info a {
	color: white;
}

@media (min-width: 769px) {
	.item-info {
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		transition: opacity 1s ease;
	}
	.item-wrapper:hover .item-info {
		opacity: 1;
	}
}

Example:

(Clicking on the photo will just open the photo, not a modal in this case.)

Where

More info at MDN Web Docs.

Thoughts

I couldn’t believe how much this one line of CSS solved. So easy.