Image Overlay Hover Effect

Hi, I don't know anything about code, but I am trying to add an image overlay hover effect to some images on my website. I want the hover overlay to be a color when someone scrolls over it. What kind of code do I need to use to make this happen? 

I tried using this, but it didn't work.

.design-layout-poster:hover .image-overlay { background: blue!important; opacity: .8; transition: 2s } .design-layout-poster .image-overlay { opacity:0; transition: 2s }

Can someone help me out? 

Hi,

First, you need to add an Image Block - Layout/Design: Poster

Next, add some caption

Next, share link to page where you added image, we can give the code