How to add tinted mask with text over images on hover : <p><img src="https://i.ibb.co/ck1BZYk/Screen-Shot-2019-02-16-at-6-43-04-PM.png" alt="my image"></p>

<p>Looking to achieve the effect in the image above.  I have a bunch of svg icons.  When the user hovers over each image, the image tints and white text is revealed unique to each icon.  </p>

<p>What's the best practice for this effect?  Make the icons the background image?  Right now they are inline svg.</p>
