ycatttt Posted January 23 Posted January 23 Does anyone know if it's possible to have a colour fade when hovering over an image that links to another gallery on my Overview page. At the moment I have given the images for the individual galleries a title, but I'd prefer to just have some sort of hover option that indicated the images link through to a full gallery. I'm using Wells template. I don't want to change the layout from a grid to a slideshow but any other ideas gratefully received.
tuanphan Posted January 28 Posted January 28 Hi, Hover image >> Show an overlay? I think this should be possible. If you share link to your site, 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!)
Solution tuanphan Posted January 30 Solution Posted January 30 You can use this code to Website > Website Tools (under Not Linked) > Custom CSS .slide a:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); z-index: 999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } .slide a { position: relative; } .slide a { position: relative; opacity: 1 !important; } .slide:hover a:after { opacity: 1; } 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!)
ycatttt Posted February 7 Author Posted February 7 @tuanfan. That worked when I tested it out but now it no longer works 😞 Any idea why?
tuanphan Posted February 11 Posted February 11 On 2/8/2024 at 12:06 AM, ycatttt said: @tuanfan. That worked when I tested it out but now it no longer works 😞 Any idea why? I see you have a syntax error in CSS box. Can you send all current code in CSS box? We can check problem 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!)
ycatttt Posted February 12 Author Posted February 12 Thanks Tuanphan. The current code is }{.sqs-gallery-block-slideshow { background-color: rgba(255,255,255,0); } #topNav subnav a { font-size: 12px; }
ycatttt Posted February 14 Author Posted February 14 Thanks Tuanphan. The current code is }{.sqs-gallery-block-slideshow { background-color: rgba(255,255,255,0); } #topNav subnav a { font-size: 12px; } I don't actually know what this code is doing - if anything. It may have been from a previous version of my site.
tuanphan Posted February 15 Posted February 15 Remove }{ here 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment