anvnguyen Posted April 22, 2022 Share Posted April 22, 2022 Site URL: https://www.anvnguyen.com/ Hi there! I'm adding grid gallery caption on hover using the CSS below, which includes the ability to make lightbox work. The hover caption is showing perfectly, but lightbox is not working... The gallery is on https://www.anvnguyen.com/home/art. Would really appreciate your help!! 🙂 .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1.3rem !important; /* caption font size */ color: #F7EDE4; /*caption font color */ text-align: center; /*padding: 16px;*/ max-width: 85%; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; } .gallery-grid-lightbox-link:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; } Link to comment
Solution tuanphan Posted April 24, 2022 Solution Share Posted April 24, 2022 Change this code .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } to .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; pointer-events: none; } anvnguyen 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
anvnguyen Posted April 24, 2022 Author Share Posted April 24, 2022 @tuanphan It worked!! Thank you so so much! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment