I need help writing a code to get specific images to hover

I'm looking to create an opacity hover effect on images that will include a click through link.

I want to do it for every image on a specific page. It is not a gallery, but I want each image to have the same effect.

The specific page is www.austenjohnson.com/videography

I want all of the images under my portfolio to make it clear that they are links to videos, I don't want people to think they are still images.

THANK YOU 

I've found an article that guides you on adding an overlay on image hover. Check it out here: https://support.squarespace.com/hc/en-us/articles/205826048-Creating-hover-effects-for-your-images

OR 

Achieving an overlay hover effect can be done with CSS code.
 

div#block-yui_3_17_2_1_1696487530512_47089 {
   opacity:0 !important;
   transition: opacity 1s;
}
div#block-yui_3_17_2_1_1696487530512_47089:hover {
   opacity:1 !important;
   transition: opacity 1s;
}