Hover to solid background?

Hover to solid background?

I am trying to achieve this effect on my website and am stumped on how to
do it. My goal is to have an image that when you mouse over it a solid
color (with like an opacity of .8) and an icon(and/or text) are displayed
on top. Note: My images are also set up to be responsive, so I'm not sure
if this will create a problem or not. EXAMPLE>>If you click the link
below, and then the computer on the left, and then scroll to the bottom
where there are 9 circles that have hover effects which is similar to my
goal.
http://themeforest.net/item/strand-one-page-parallax-bootstrap-template/full_screen_preview/5445825
Any direction, tutorials, advice would be very much appreciated!