Harvest Gold
Our succulent dishes are prepared with freshly picked produce from our local farmer's market.
Book NowEverWeb Widgets
RGL Stack Slide Offset Grid
Text Overlap Image
The main section has a grid layout. In this example it is set centered with a maximum width of 1200px and a height of 600px.
The grid has eight columns and three rows.
The image starts in column 3, spans 5 columns and all 3 rows.
The text starts at column 1, spans 3 columns and is in row 2.
Break Point
The break point at which the layout changes is set for tablets in portrait mode. Both the image and the text are set to start in column 1 and span all 8 columns so that they occupy the full width of the section.
The image still spans all 3 rows and the text is placed in row 3 so that it overlays the bottom of the image. Its "align-self" property is set to "end" so that it lines up with the image's bottom edge.
Vertical Align
One of the really useful features of the CSS Grid Layout Module is the "align-self" property which can be set to "start", "center", "end" or "auto".
"Start" aligns it at the top of the row, "center" in the middle and "end" at the bottom. "Auto" will stretch it to the full height of the row.
Variations
In the item below, the text and image have switched positions. The text is placed in row 3, starts at column 6 and spans 3 columns which would place it at the top and right edges of the container. The control for margin is given a value of 20px to space it in a little.
Below the break point, the text becomes full width and is placed in row 1 with its "align-self" property set to start to overlay the top of the image.
Animation
The animation is turned on last by checking a box and can be set to fire once or every time the item enters the viewport.
By default, the animation is turned off when the page is viewed on mobile phones. There is a checkbox for turning it on if required.
There are controls for setting the animation time and delay in seconds and a selector for choosing the animation type. The values are Up, Down, Left and Right.
Serene
Our soups and consommés include our secret blend of herbs and spices to induce a calm state of mind.
Info