css overlays can be a nice way of adding a little spunk to your images and/or image gallery. A text overlay usually looks like the following: you have an image(for example) and when you hover over the image, the image turns into a dark background with a magnifying glass. Here is an example of a css text-overlay.

the code for an example of a text overlay:

See the Pen MazOoa by Matt Pedersen (@mpedersen2054) on CodePen.


in this example, im just taking a .card, which has a background-color of red, in reality you will probably be using an image, and when you hover over the image, a white plus appears. This is done by making the .overlay occupy 100% of its parents width and height, giving it a mildly opaque background, setting opacity to 0, and giving it a transition properties to make it more animated. Next, we add .card:hover .overlay { opacity: 1 } so when the card is hovered over, the overlay is given an opacity of 1.