undefined Posted July 17 Share Posted July 17 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
tuanphan Posted July 19 Share Posted July 19 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
undefined Posted July 19 Author Share Posted July 19 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 heyawaiszahid Posted July 19 Solution Share Posted July 19 @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 Posted July 22 Author Share Posted July 22 @heyawaiszahid totally works and gets the job done. I would be curious to the drawbacks, but in the end, if I dont come across them it really doesnt matter! 😄 thank you so much for your help! Link to comment
heyawaiszahid Posted July 22 Share Posted July 22 @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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment