How to disable an image fade in hover state

Site URL: https://www.papergardenrecords.com/

Hey guys,

I'm working on some updates for my friend's website and struggling a bit with some custom CSS code that someone else previously put in. (I'm a designer not a coder so nervous to edit existing code)

It looks like the following code has been put in to the design>custom CSS area so that all thumbnail images in the news and artists sections fade when you hover over them. However this happens to ALL the images throughout the whole website. I want to change it so that regular images (the ones at the top of a page for example that don't click through to anything) stay static, its just the thumbnail images that fade to show they're an active link to can click through to another page. I hope i am making sense.
Here's the website: https://www.papergardenrecords.com/

And here's all the code in the custom CSS area. Thanks so much in advance! I have been searching for ages in the forums etc and not found a solution. Not sure if it helps but this is using the Bedford template.

#header {
  position: fixed;
}

#footer .html-block a{
border-bottom: none;
}

#footer .html-block a:hover{
  color: #62ac55;
}

.thumb-image:hover{
opacity: 0.5;
transition: all 1s ease
}

.summary-item:hover {
      opacity: 0.5;
    transition: all 1s ease;
}

.archive-group-name-link:hover {
  color:#62ac55;
}

.fa:hover{
  color:#62ac55;
   -o-transition:.8s;
  -ms-transition:.8s;
  -moz-transition:.8s;
  -webkit-transition:.8s;
  transition:.8s;
}
.fa{
  padding: 5px;
  font-size: 1.7em;
}

.view-list .entry+.entry{
  margin-top:50px;
}

.privy-popup-content-wrap {
  padding-top:250px;
}

#privy-inner-container img{
display:none;
}

.privy-privacy-container{
  display:none;
} 

Hi. Do you still need help?

Hi @tuanphan!
Yes please, I understand that it is custom CSS code but i haven't been able to figure out yet which part it is. I understand the thumb image hover and that section is making thumbnail images fade on a hover state but am not sure what the .fa does not what is making all images in general fade.

If you have time to help i would really appreciate it! Im a bit afraid to go through and trial and error delete and replace bits of the code to see what happens, but i know thats also an option to figure out which part is doing it.

You can wrap all code in <style> code here</style>

then add to Page Settings > Advanced > Header. The code will work on that page only

I think i finally figured it out!!

For anyone else who finds themselves here... This is the code that was making ALL IMAGES fade on hover, even the ones i didn't want/that were not hyperlinks or clickable.

.thumb-image:hover{
opacity: 0.5;
transition: all 1s ease
}

And then the following code i added to target a specific image on a page (identified the block using the squarespace block ID finder plugin) so that if i want the image to be a link, i can add the hover just to that one not across the whole site. (remove the #block-yui_3_17_2_1_1617833655292_15379 and replace with your own unique block code)

.image-block#block-yui_3_17_2_1_1617833655292_15379:hover {
opacity: 0.5;
transition: all 1s ease;
}

Thanks

p.s. this is using squarespace 7.0 on the Bedford template.