anderslonnfeldt Posted April 4, 2022 Share Posted April 4, 2022 Site URL: https://www.anderslonnfeldt.com/ Hello, I am looking for custom CSS to add a hover text effect to the images in my main gallery page. I am attaching an image of the hovering effect I am looking for. I am reffering to the upper left image with the text "Farewell - short film" This is my website: https://www.anderslonnfeldt.com/ Thanks in advance. Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 You mean Initial: hide text Hover: show text over image in center Is this right? Can you add some text? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
anderslonnfeldt Posted April 5, 2022 Author Share Posted April 5, 2022 Correct! How and where do I add text? Link to comment
tuanphan Posted April 6, 2022 Share Posted April 6, 2022 23 hours ago, anderslonnfeldt said: Correct! How and where do I add text? Edit your page >> Hover on gallery >> Click Image icon >> Enter Description Next hover on Gallery >> Click on Pencil icon >> Toggle on "Enable Caption" Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
anderslonnfeldt Posted April 6, 2022 Author Share Posted April 6, 2022 Done. Now the captions appeared under the images. Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 On 4/6/2022 at 11:33 PM, anderslonnfeldt said: Done. Now the captions appeared under the images. Yes. You need to do it first, then I can check code to move text over image + make hover effect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
anderslonnfeldt Posted April 10, 2022 Author Share Posted April 10, 2022 I already did. But the text is black, that is why it can't be seen onto the black background. Link to comment
tuanphan Posted April 11, 2022 Share Posted April 11, 2022 10 hours ago, anderslonnfeldt said: I already did. But the text is black, that is why it can't be seen onto the black background. Try adding to Design > Custom CSS figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
anderslonnfeldt Posted April 11, 2022 Author Share Posted April 11, 2022 This is great! Is it possible to make the font smaller on mobile? Link to comment
tuanphan Posted April 15, 2022 Share Posted April 15, 2022 On 4/11/2022 at 3:42 PM, anderslonnfeldt said: This is great! Is it possible to make the font smaller on mobile? Add this CSS under @media screen and (max-width:767px) { figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content { font-size: 12px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
anderslonnfeldt Posted April 15, 2022 Author Share Posted April 15, 2022 It looks great. Thanks a lot. I really appreciate this 🙂 Have a great weekend. 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