Image hover effect - transparency and text

hi there!
Basically on my home page only, I'd like my images to be clickable links. So people know this, i'd like to add a hover effect that makes the images go a bit transparent and makes text appear 🙂

(also I've seen people share their website with a password but mine is private so if anyone could direct me on how to share in this way so you can help better that would be great!)
 

Can you share link to home page?

@tuanphan hi, thanks!

https://semicircle-onion-22zh.squarespace.com/config/

password: ducksquack

Concern about the link for checking should not include /config. It should be: https://semicircle-onion-22zh.squarespace.com/

Have you attached the links to your images yet?

we can use the following custom CSS to apply the effect when hovering an image block

.image-block-outer-wrapper:hover .fluidImageOverlay {
  opacity: 0.5;
}

Hope that it can help

1 hour ago, HoaLT said:

Have you attached the links to your images yet?

we can use the following custom CSS to apply the effect when hovering an image block

.image-block-outer-wrapper:hover .fluidImageOverlay {
  opacity: 0.5;
}

Hope that it can help

I hadn't yet but I have now! the only image I haven't linked yet is the little comic strip at the bottom as i'll link that to my substack but still sorting the substack out!