kimsedgwick Posted April 6, 2020 Share Posted April 6, 2020 Site URL: https://www.kimsedgwick.co.za/ Looking to add hover text and an opaque white block on my index page - collection gallery. As it stands, the text is currently over the image permanently, I want this to only appear when you hover over the image. There is currently a faint opacity that appears when the image is hovered over, I want to decrease the opacity so It becomes a bit more white and you see less of the image. See images attached for reference. My current site and what I am looking for, the images attached of what I am looking for has a solid white block and the text appears when hovered over but I would prefer mine to be less opaque than it is now but not solid . Thanks so much! Link to comment
tuanphan Posted April 7, 2020 Share Posted April 7, 2020 Add to Home > Design > Custom CSS h2.Index-gallery-item-content-heading { visibility: hidden; } .Index-gallery-item-inner:hover h2.Index-gallery-item-content-heading { visibility: visible; } 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
kimsedgwick Posted April 7, 2020 Author Share Posted April 7, 2020 31 minutes ago, tuanphan said: Add to Home > Design > Custom CSS h2.Index-gallery-item-content-heading { visibility: hidden; } .Index-gallery-item-inner:hover h2.Index-gallery-item-content-heading { visibility: visible; } Thanks so much! This worked perfectly 🙂 You are a life saver Link to comment
kimsedgwick Posted April 15, 2020 Author Share Posted April 15, 2020 On 4/7/2020 at 11:56 AM, kimsedgwick said: Thanks so much! This worked perfectly 🙂 You are a life saver Is there perhaps any css code I could add to make these blocks more white and less opaque when I hover over them ? for text legibility reasons 🙂 Link to comment
tuanphan Posted April 15, 2020 Share Posted April 15, 2020 1 hour ago, kimsedgwick said: Is there perhaps any css code I could add to make these blocks more white and less opaque when I hover over them ? for text legibility reasons 🙂 Can you share link to page where you use blocks? 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
kimsedgwick Posted April 15, 2020 Author Share Posted April 15, 2020 3 minutes ago, tuanphan said: Can you share link to page where you use blocks? Hi there, it is kimsedgwick.co.za 🙂 Link to comment
tuanphan Posted April 20, 2020 Share Posted April 20, 2020 Add to Home > Design > Custom CSS /* Opacity */ .Index-gallery-item:hover .Index-gallery-item-image img { opacity: 10% !important; } /* background color */ .Index-gallery-item-image { background-color: white; } /* Overlay title */ .Index-gallery-item:hover .Index-gallery-item-content-heading { color: black !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
barrysutton Posted May 4, 2020 Share Posted May 4, 2020 On 4/7/2020 at 5:24 AM, tuanphan said: Add to Home > Design > Custom CSS h2.Index-gallery-item-content-heading { visibility: hidden; } .Index-gallery-item-inner:hover h2.Index-gallery-item-content-heading { visibility: visible; } Hi Tuanphan, Is there a similar code that can be used in 7.1 to accomplish this in a masonry gallery? Thanks! Link to comment
tuanphan Posted May 4, 2020 Share Posted May 4, 2020 6 minutes ago, barrysutton said: Hi Tuanphan, Is there a similar code that can be used in 7.1 to accomplish this in a masonry gallery? Thanks! Can you share link to gallery on your site? 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
barrysutton Posted May 4, 2020 Share Posted May 4, 2020 Sure! https://pentagon-heptagon-rnn2.squarespace.com/work password: california I am trying to get a % color to appear on top of the image on rollover, as well as the description text. You might see a lot of jumbled code in the CSS as I have tried to patch a couple solutions together... a bit messy. 🙂 Link to comment
tuanphan Posted May 4, 2020 Share Posted May 4, 2020 1 minute ago, barrysutton said: Sure! https://pentagon-heptagon-rnn2.squarespace.com/work password: california I am trying to get a % color to appear on top of the image on rollover, as well as the description text. You might see a lot of jumbled code in the CSS as I have tried to patch a couple solutions together... a bit messy. 🙂 private site 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
tuanphan Posted May 4, 2020 Share Posted May 4, 2020 6 minutes ago, barrysutton said: sorry password: california I answered this problem to 2 members in another questions, I tried to find but did not see. I will check again tomorrow. 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
barrysutton Posted May 4, 2020 Share Posted May 4, 2020 thank you very much. can I make a donation for your work? Link to comment
tuanphan Posted May 4, 2020 Share Posted May 4, 2020 8 hours ago, barrysutton said: thank you very much. can I make a donation for your work? Morning. I will checking again this morning You can use this PayPal. 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
tuanphan Posted May 4, 2020 Share Posted May 4, 2020 8 hours ago, barrysutton said: thank you very much. can I make a donation for your work? try this 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
barrysutton Posted May 5, 2020 Share Posted May 5, 2020 All works great! It seems to not allow linking the image to another page or gallery. Is there a way to allow linking images that have this rollover effect? Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 2 hours ago, barrysutton said: All works great! It seems to not allow linking the image to another page or gallery. Is there a way to allow linking images that have this rollover effect? Which code did you use? Use code in last comment. and Have you inserted link on Images yet? 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
barrysutton Posted May 6, 2020 Share Posted May 6, 2020 Hi, I used the code from your post and it works great - I decided to not use links from the gallery. I really appreciate your work it has been terrific. Sent you a tip by PayPal, hope it helps! Thank you so much. Link to comment
tuanphan Posted May 6, 2020 Share Posted May 6, 2020 3 minutes ago, barrysutton said: Hi, I used the code from your post and it works great - I decided to not use links from the gallery. I really appreciate your work it has been terrific. Sent you a tip by PayPal, hope it helps! Thank you so much. Yes. I received. Thank you. 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
Archived
This topic is now archived and is closed to further replies.