Make a link clickable in a container that is positioned absolute
I’m creating a gallery with a magnific popup, but I have a hover event on the images that shows an indicator indicating it can be viewed, therefore I had to make it an absolute position. However, it prevents the image from being clickable, thus I can’t access the gallery carousel. To remedy this, I tried z-index: 1, but it didn’t work. This 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>
Add comment
Answers (1)
Add AnswerTo fix your issue The.gallery-item-info element that you display above the content should have pointer-events: none. As a result, the event will pass through to the underlying content since it won’t take mouse input.
$(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; } .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); pointer-events: none; } .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> <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> <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>