Creating a text and color hover overlay on an image block

Site URL: https://corn-halibut-gfxb.squarespace.com/config/pages

Hi! 

I am desperate to figure out how to add a color and text hover overlay to my site. I followed a Youtube video, which gave me the directions to create a colored text box on top of the image block, then enter this code with the correct block ID's-

@media only screen and (min-width: 640px){ #block-12345 { opacity: 0; transition: opacity 1s }

#block-12345:hover { opacity: 1; transition: opacity 1s } }

While this works, it also makes my image blurry when I am not hovering over it. Any help would be GREATLY appreciated. Thank you so much!

NEVER MIND I HAD THE BLUR EFFECT ON!