I’m making a gallery and I’m using magnific popup to create it, however I have a hover event on the images that show an icon to suggest it can be viewed so I had to make it an absolute position. However, it stops the image from being clickable hence I can’t open the the gallery carousel. I tried using a z-index: 1 to fix this but it didn’t work. Here is my code:
$(document).ready(function() {
$('.seller-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
});.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.gallery-item {
cursor: pointer;
position: relative;
z-index: 1;
}
.gallery-item a {
pointer-events: all;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.gallery-item-info {
display: none;
}
.gallery-item-info span {
display: inline-block;
}
.img-fluid {
max-width: 100%;
height: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<div class="seller-gallery gallery-item">
<a href="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="" class="img-fluid">
</a>
<div class="gallery-item-info">
<span><i class="fas fa-eye fa-2x text-white"></i></span>
</div>
</div>
2
Answers
To fix your issue add
pointer-events: noneto the.gallery-item-infoelement you display over the top of the content. This will mean that it accepts no mouse input, so the event will pass through to the underlying content.Alternative Method Using Pseudo-elements with Font Awesome
As an alternative, you could instead create the icon and gray overlay using a pseudo-element of
.gallery-item a. The pseudo-element is a child of the link, so will not interfere with clicking it and it eliminates the need for an extra span element, which is removed in my example. It also makes it simple to apply the overlay to multiple linked images on a page if desired.The use of pseudo-elements with Font Awesome is documented here:
https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements
For an explanation I have commented the CSS in this example: