CloudX Posted May 31, 2023 Posted May 31, 2023 Hi, I've been trying to achieve a specific look for my gallery which I was finally able to, however my links for each image don't work anymore. https://www.cloudxfestival.com/lineupworkingonn Can you please help, I've tried a few different things and even thought it might be due to the overlay but I can't seem to get around it. Thanks!
tuanphan Posted June 2, 2023 Posted June 2, 2023 Can you remove your CSS code? We will give you new code to achieve this (I used to solve some same cases) 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!)
CloudX Posted June 5, 2023 Author Posted June 5, 2023 The css related to the gallery, of course removing now. Let me know if you need anything else or for me to remove anything else! Thanks so much!
tuanphan Posted June 8, 2023 Posted June 8, 2023 Hi, Sorry. I forgot your initial layout. What should it look like now? https://www.cloudxfestival.com/lineupworkingonn 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!)
CloudX Posted June 9, 2023 Author Posted June 9, 2023 I would like for each image to have the description displayed on top and centred in white font, and the image should be clickable. On hover I would like for a yellow overlay to appear on top of it whilst the name remains and the whole image is still clickable. Thanks again!
tuanphan Posted June 11, 2023 Posted June 11, 2023 Initial: like this Hover 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!)
Solution tuanphan Posted June 13, 2023 Solution Posted June 13, 2023 21 hours ago, CloudX said: Yes, exactly that! Thanks!! Add to Design > Custom CSS /* Masonry hover 2 */ figure.gallery-grid-item { position: relative; } .gallery-caption, .gallery-caption-wrapper { position: static !important; z-index: 100 !important; top: unset; transform: unset; height: initial; opacity: 1 !important; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 1 !important; pointer-events: none; color: white; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(244,211,76,1); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } 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!)
CloudX Posted June 13, 2023 Author Posted June 13, 2023 That worked thank you so much! Really appreciate all your help!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment