Flip Card

Flip cards save space and add some interest to web page by providing an opportunity for visitors to interact with the content. This card goes further by adding a hover tilt animation option when the item is viewed on a computer.
NOTE: Flip cards normally need to have a fixed width and height. These cards are made responsive using an intrinsic ratio which is calculated in the styles. For this to work, the image width and height needs to be entered into the boxes in the widget setting panel.
Images
The image is inserted in two sizes - one for wide browser/screen widths and the other for narrower mobile devices. The large image should be cropped to the same width as the widget's maximum width setting before importing into EverWeb.
The image has an alt text attribute for the search engines and an optional overlay caption at the bottom with adjustable background opacity.
Flip Arrow
The flip icon appears at the top right when the page is viewed on touch devices. It can also appear always by checking a box but this is not really necessary since the cursor type is set to "alias" (curved arrow) to give computer users a clue that something will happen if they click.
Flip Side
The content is centered horizontally and vertically and has a maximum width setting. There is an h1 heading, text block and an optional CTA style link tab which can be configured to open internal or external pages and in a new window of required.
The font can be web safe or non web safe or Google hosted with a web safe fallback. There is a control for adjusting the vertical spacing of the heading, text and link.
Outer Styles
The item can have a border and/or a box shadow and there is a control for adjusting the left/right padding to show the box shadow when present.
X or Y Animation
The card can be flipped on the X-axis or th Y-axis and the animation time is set in milliseconds.
Container
The container has controls for adjusting the background color and its opacity and a control for adjusting the vertical spacing from the items above and below and to show the box shadow when present.
Two Images
The item shown below is a two image version where the images sit side by side on browser/screen widths above the break point and stack vertically on devices with screen widths below the break point.
Each item has the same features as the single image version except the image is inserted in only one size. The images used in this demo were cropped to 800px wide before importing into EverWeb.