Dark cover. This is a layer which is placed over the image and captures all the space taken up by the image. It means that this layer has the same width and height as the image, no matter what the image size is. This layer is added by pseudo-element before in CSS, it is semi-transparent (opacity CSS property) with black as the background color. It appears when the user hovers the cursor over the image.

Appearing text. This is a layer which is placed over the "Dark cover" layer. This layer is added by pseudo-element after in CSS and has a transparent background. It contains only text that is taken as the value from the attribute title in a element. This layer is positioned in the middle of the image vertically and horizontally; it has animation that consists of one stretching effect which can be either horizontal or vertical. This animation is achieved by combining two CSS properties: transform and transition. The transform CSS property uses scaleX or scaleY transformation functions in order to stretch this layer horizontally or vertically. This animation starts operating when the user hovers the cursor over the image.