CloudX Posted May 31, 2023 Share 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! Link to comment
tuanphan Posted June 2, 2023 Share 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!) Link to comment
CloudX Posted June 5, 2023 Author Share 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! Link to comment
tuanphan Posted June 8, 2023 Share 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!) Link to comment
CloudX Posted June 9, 2023 Author Share 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! Link to comment
tuanphan Posted June 11, 2023 Share 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!) Link to comment
CloudX Posted June 12, 2023 Author Share Posted June 12, 2023 Yes, exactly that! Thanks!! Link to comment
Solution tuanphan Posted June 13, 2023 Solution Share 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!) Link to comment
CloudX Posted June 13, 2023 Author Share Posted June 13, 2023 That worked thank you so much! Really appreciate all your help! 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