Responsive css overlay mask? help!

I’ve got some cool css boxes with a cool overlay effect written in css.

Now although not strictly a wordpress issue I’m hoping someone can help.

what i need is for these boxes to be responsive! there must be a way to do this in css but i can’t figure it out. I’ve tried to set a max width and height (%) but this only works with the width.

I don’t mind if when reduced down to a small size if the overlay mask is replaced with the “read more” button only.

any help or advice much apprieciated.

you can see what i’ve done so far here:
https://www.albanyblindsedinburgh.co.uk/hover