Jump to content

Personal Plan hover fade option?

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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. 

Screenshot 2024-01-23 at 21.43.15.png

  • Replies 9
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
Posted

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!)

Posted

Thanks Tuanphan. The current code is 

}{.sqs-gallery-block-slideshow {
 background-color: rgba(255,255,255,0); 
}
#topNav subnav a { font-size: 12px; }

Posted

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.

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.