Hero Twist

The image appears with a twist animation on page load. This is a custom animation which is create by scale and skew transforms with a cubic-bezier timing function.
The image animation is turned on by checking a box and the animation time is set in milliseconds. Note that, once the box is checked, the image will not be visible on the EverWeb design canvas.
Images
To make it suitable for responsive pages, the image is inserted in two sizes - one for computers and the other smaller one for mobile devices. The images used in this demo were reduced to 1200px and 800px wide respectively before importing into EverWeb.
To those not familiar with creating responsive designs, these image sizes may seem small. Essentially, they are background images so top quality is not a consideration and a small size for fast download speed is the aim - particularly on mobile devices.
Overlay
The overlay has a grid layout with five columns and three rows so that the items can be positioned where required. It has controls for color and opacity and can animated in by checking a box and setting the animation time and delay in seconds.
There is an h1 heading, a text block and an optional link tab. As can be seen from the example above, the text can use a Google hosted font with a web safe fallback - in this case the font is Stint Ultra Expanded and the fallback is helvetica.
The link can be configured to open internal or external pages and in a new window if required.
Item Position
The items are positioned vertically so that the heading is in row one, the text in row two and the link in row three.
The heading and text are positioned on the X-axis using column numbers and column span. The link is positioned using a column number.
When the page is viewed on tablets in portrait mode, all the items become horizontally centered and the fixed height images becomes full height to fill the screen of mobile phones in portrait mode.