← All elements
<figure class="tp"><div></div><figcaption>Summer trip</figcaption></figure>About this card
A polaroid-style photo card that straightens, lifts and loses its tilt when hovered.
How it works
The polaroid is rotated -6 degrees with the individual rotate property. On hover rotate returns to zero while scale and translate lift it, and the shadow grows, using an overshooting cubic-bezier to feel like it snaps straight.
Ways to customise it
- Change -6deg for another tilt.
- Swap the gradient photo for a real image.
- Edit the caption text and font.
Good to know
Add alt text to any real image you place inside. The handwriting font stack uses system fonts only, so nothing extra is downloaded.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.