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.


<div class="item-wrapper">
        <a href="/big-image.jpg"><img src="/small-image.jpg" /></a>
    <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>
.item-wrapper {
	box-sizing: border-box;
	height: 225px;
	position: relative;
	width: 300px;
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;


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

See the Pen
point-event example
by Naomi Blindeman (@blindeman)
on CodePen.0


More info at MDN Web Docs.


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

Leave a Comment