catenelson Posted November 19, 2020 Posted November 19, 2020 I am on trial mode for 7.1. Current site is 7.0. I want a very specific thing. Which is gallery pages of images of my artwork in mosaic mode where the image description is on overlay on hover for each image and then i can click through to another page for each image where you cna see deatils shots and more info etc. I can;t do the overlay feature and it is making me insane I am an artist.
tuanphan Posted November 20, 2020 Posted November 20, 2020 Try this guide. 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!)
catenelson Posted November 20, 2020 Author Posted November 20, 2020 I found code in another post but when I add it it doesn't change anything. Maybe I am not adding it n the right place? 7.1 is challenging! This was the code I found elsewhere: .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-overlay, .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1 !important; } I am an artist.
catenelson Posted November 20, 2020 Author Posted November 20, 2020 15 hours ago, tuanphan said: Try this guide. ! I tried entering it in the Design section under "custom CSS" but it did not work. It moves the caption and flashes an overlay as soon as I enter the code but then when I save and look, the caption does not appear anywhere. What am I doing wrong? I am an artist.
catenelson Posted November 20, 2020 Author Posted November 20, 2020 basically afterI entered this code...the caption just flashes for a sec but when I test the site it isn't visible at all. figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* 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: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } I am an artist.
tuanphan Posted November 22, 2020 Posted November 22, 2020 Can you share site url? We can check easier 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!)
catenelson Posted November 23, 2020 Author Posted November 23, 2020 On 11/21/2020 at 7:25 PM, tuanphan said: Can you share site url? We can check easier I am working in a trial first to see if I can create the design I want before I commit to switching to 7.1. So I have no URL to share I am an artist.
catenelson Posted November 25, 2020 Author Posted November 25, 2020 I'm not sure what to do here to see if this will work if I can't share the url in trial mode I am an artist.
tuanphan Posted December 3, 2020 Posted December 3, 2020 You can duplicate the site & share duplicated site url 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!)
catenelson Posted December 9, 2020 Author Posted December 9, 2020 I got this problem solved by entering code as follows: figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; background: rgba(255,255,255,0.5); 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: 0 !important; pointer-events: none; } .gallery-grid-item:hover .gallery-caption-content { opacity: 1 !important; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #f4f6ea; /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } I am an artist.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.