AndrewDurand Posted July 28, 2022 Share Posted July 28, 2022 Hi, I am trying to add a simple overlay on certain image blocks (that have text on top) in Fluid Engine. I would like the overlay to be a simple color or gradient effect on hover. Similar to the image hover effects seen here: https://www.ulaval.ca/en anyone know of any code to achieve this? Thank you 🙂 !! Link to comment
Beyondspace Posted July 28, 2022 Share Posted July 28, 2022 1 hour ago, AndrewDurand said: Hi, I am trying to add a simple overlay on certain image blocks (that have text on top) in Fluid Engine. I would like the overlay to be a simple color or gradient effect on hover. Similar to the image hover effects seen here: https://www.ulaval.ca/en anyone know of any code to achieve this? Thank you 🙂 !! Can you share your site with the protected password so I can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
AndrewDurand Posted July 28, 2022 Author Share Posted July 28, 2022 Hi bangank, The URL: https://oriole-panda-2fhm.squarespace.com/ PW: dialogue I am trying to get a hover overlay on the image blocks in the "our partners" section. and an overlay on the images in the background. Thanks! Link to comment
tuanphan Posted July 31, 2022 Share Posted July 31, 2022 On 7/29/2022 at 12:59 AM, AndrewDurand said: Hi bangank, The URL: https://oriole-panda-2fhm.squarespace.com/ PW: dialogue I am trying to get a hover overlay on the image blocks in the "our partners" section. and an overlay on the images in the background. Thanks! Add to Design > Custom CSS /* Our Partners Image Overlay */ .fe-62deaf4c2e56eb135c4488ed .content-fill:after { content: ""; position: absolute; background-color: rgba(0,0,0,0.5); top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; transition: all 0.3s; } .fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after { opacity: 1; transition: all 0.3s; } Ricebunny42 1 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
AndrewDurand Posted July 31, 2022 Author Share Posted July 31, 2022 Thank you! This worked well 🙂 So you are targeting certain elements with this>> (where did this come from, its not the section ID?) .fe-62deaf4c2e56eb135c4488ed Then told it to fill content with opacity 0? .content-fill:after and then change the opacity of the "fill" when you hover over image blocks? .fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after Just trying to understand! Thank you for your help. Link to comment
Solution tuanphan Posted August 3, 2022 Solution Share Posted August 3, 2022 On 7/31/2022 at 9:47 PM, AndrewDurand said: Thank you! This worked well 🙂 So you are targeting certain elements with this>> (where did this come from, its not the section ID?) .fe-62deaf4c2e56eb135c4488ed Then told it to fill content with opacity 0? .content-fill:after and then change the opacity of the "fill" when you hover over image blocks? .fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after Just trying to understand! Thank you for your help. It is similar section id. You can also use data-section-id instead. and 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
AndrewDurand Posted August 3, 2022 Author Share Posted August 3, 2022 Amazing, you guys are awesome 🙂 Cheers. Link to comment
Ricebunny42 Posted August 7, 2022 Share Posted August 7, 2022 Hi, Thank you for this code I've been looking everywhere for one that works with fluid engine! Is there a way to also add text when you hover over the image? I'm also trying to add a subtle zoom in on my images when hovering as well if possible. Thank you! Link to comment
tuanphan Posted August 10, 2022 Share Posted August 10, 2022 On 8/8/2022 at 2:36 AM, Ricebunny42 said: Hi, Thank you for this code I've been looking everywhere for one that works with fluid engine! Is there a way to also add text when you hover over the image? I'm also trying to add a subtle zoom in on my images when hovering as well if possible. Thank you! If you use Fluid Engine, each case will need a different code. If you use Classic Editor Image Block, this will achieve easier. You can add Image, text over image, then share link to page on your site, we can check & give the code 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment