Jump to content

Gallery Slideshow — removing image hover effects

Go to solution Solved by heyawaiszahid,

Recommended Posts

Hey everyone!

I am using this code globally:

a:link img {
opacity: 1.0 ;
}

a:hover img { 
opacity: 0.5;
}
 

However, I now need to have a single image from the homepage banner link to a URL. The images are set to swap out without any animation every 3 sec. Problem is when I mouse over the linked image, weird transparency strangeness happens. 

In my mind there are two ways of fixing this, but I am not sure which is easier/would work best. One is to override image hover effects on the home page only. The other is to stop the banner images to continue swapping to the next one for as long as someone is hovering over. My preference would be this, with code that is not targeting any ID since these images could change frequently and be updated by people with zero tech skills. So either Custom CSS or Page Header code would be amazing.

https://owl-sepia-z53p.squarespace.com/ — in progress site, no password.

 

Thank you all so SO much for your help!

 

Link to comment
  • Replies 5
  • Views 677
  • Created
  • Last Reply

Top Posters In This Topic

To exclude some images from your code, you can use this simple tips

(1) First, edit your image >> Edit ALT and add this to alt text

no-hover

(2) Edit your code to this

a:link img {
opacity: 1.0 ;
}

a:hover img { 
opacity: 0.5;
}

a:hover img[alt*="no-hover"] {
opacity: 1 !important;
}

 

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

Link to comment

That's super cool, and will work for a lot of things, but unfortunately here I am dealing with gallery images... All I have is Description and URL, no option for alt. Is there a way to do that with a description? 

Link to comment
  • Solution

@undefined In my opinion, the simplest approach is to exclude the homepage from your global code, as shown below. While this solution isn't perfect and has some drawbacks, it's the cleanest approach for your current requirements.

body:not(.homepage) {
  a:link img {
    opacity: 1;
  }
  a:hover img {
    opacity: 0.5;
  }
}

 

Link to comment

@undefined I'm glad it helped. Since we don't currently have another linked image on the homepage, it's okay to exclude all homepage links. However, this approach won't work if you plan to add a few image links to the homepage later on. There are a few solutions to that as well, but let's not complicate a simple thing when it's not necessary.

Link to comment

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.