EverWeb PhotoKit

Text Over Image

PhotoKit Text Over Image

PhotoKit Text Over Image

The image has an overlay with a CSS Grid layout.
The overlay text is enclosed in an HTML5 <article> with a maximum width setting.
The article can be positioned in the grid using the align-content and justify-content selectors

PhotoKit Widgets

Text Over Image

Text over image is used a lot in web designs. One commom application is an image about food preparaation with the overlay text for info, ingredients, instructions …
Text On Hover
The image below shows the text on hover when viewed on computers and laptops and on page load when viewed on touch devices with no hover function..
Images
The images in the examples are inserted in two sizes. They were cropped to 1200px wide and 600px wide respectively before importing into EverWeb.
Lazy Load
The first example does not need lazy loading since it is seen at page load. The second example has lazy loading turned on so that it doesn't download until the page is scrolled.

PhotoKit Text Over Image

Morpho Peleides

The blue morpho butterfly’s wings are bright blue, edged with black. The blue morpho is among the largest butterflies in the world, with wings spanning from five to eight inches. Their vivid, iridescent blue coloring is a result of the microscopic scales on the backs of their wings, which reflect light

Text Position

Using the align-content and justify-content selectors, the text position has nine options. In the first item above, the text is positioned horizontally "left" and vertically "end". The first image has the text positioned "center" and "center".
On screen widths below the break point, the text appears below the image and separate controls to for setting the font color, background color and the link color.