Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.
Image as a background and a layer with text on hover on it
In this case the box's width and height are defined in CSS and image is a background of the box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.
Image as img tag and second image as layer on hover over it
In this case there is no layer with text, because another image is displayed on hover.
Effects
Sliding from bottom to top
Sliding from top to bottom
Sliding from left to right
Sliding from right to left
Scale from 0% to 100% with border-radius change.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.
Rotate from 0 deg to 360 deg (one full rotation) with opacity and border-radius change.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.
Mixed two above examples - scaling and rotating.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.
Mobile support
When user clicks here first – the top layer will show with text “Tap again to go further”, and on the second click – “hover box” will become linkable. You should test it by using mobile device.