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
<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>.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.