Polaroid Images

Now with superpowers

Polaroid on images

By default there is no rotation but you can use the trf-r modifiers to define it.

<div class="box-none ta-c">

	<!-- Image polaroid with rotation -20deg -->
	<img src="../static/img/chuck.jpg" class="image-polaroid trf-r--20" width="150" />

	<!-- Image polaroid with rotation -10deg -->
	<img src="../static/img/chuck.jpg" class="image-polaroid trf-r--10" width="150" />

	<!-- Image polaroid default -->
	<img src="../static/img/chuck.jpg" class="image-polaroid" width="150" />

	<!-- Image polaroid with rotation 10deg -->
	<img src="../static/img/chuck.jpg" class="image-polaroid trf-r-10" width="150" />

	<!-- Image polaroid with rotation 20deg -->
	<img src="../static/img/chuck.jpg" class="image-polaroid trf-r-20" width="150" />
</div>

Polaroid on links with images inside

By default there is no rotation but you can use the trf-r modifiers to define it.

<div class="box-none ta-c">

	<!-- Image polaroid with rotation -20deg -->
	<a href="#" class="image-polaroid trf-r--20">
		<img src="../static/img/chuck.jpg" width="120" />
	</a>

	<!-- Image polaroid with rotation -10deg -->
	<a href="#" class="image-polaroid trf-r--10">
		<img src="../static/img/chuck.jpg" width="120" />
	</a>

	<!-- Image polaroid default -->
	<a href="#" class="image-polaroid">
		<img src="../static/img/chuck.jpg" width="120" />
	</a>

	<!-- Image polaroid with rotation 10deg -->
	<a href="#" class="image-polaroid trf-r-10">
		<img src="../static/img/chuck.jpg" width="120" />
	</a>

	<!-- Image polaroid with rotation 20deg -->
	<a href="#" class="image-polaroid trf-r-20">
		<img src="../static/img/chuck.jpg" width="120" />
	</a>
	
</div>