How can i get an overlay on my homepage that disappears on image hover?

How can i get an overlay on the homepage and when i hover the image revels?

How to i get an overlay over the homepage that when i hover over an image it revels ?

https://khaki-helix-xbzl.squarespace.com/config/pages

Password:Holliday

I have this code that puts the fade on, but when i hover over nothing happens. It meant to revel the image on hover. Any CSS help?

Hi,

Line 5 is invalid. Line 5 should be

img:hover {
	opacity: 0;
}

and no need to use !important in this case