Flipcards Skulls

<link href='https://fonts.googleapis.com/css?family=Overlock+SC' rel='stylesheet' type='text/css'>

<style> .flip-container { perspective: 1000px; } .flip-container:hover .flipper, .flip-container.hover .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .flip-container, .front, .back { width: 280px;height: 480px;} .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0; border-radius:20px; border: 2px solid #000} .front { z-index: 2; transform: rotateY(0deg); background: #000000;} .back { transform: rotateY(180deg); background: #111111; overflow:auto} tbody{border:none} table{width:auto;} .preview{background:none} .ftext, .btext{padding:20px; font: 10px verdana; color: #fff} h4{font: 42px 'Overlock SC'; color: #fff}</style>


<center><table><tr><td>


<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front" style="background: url('https://c2.staticflickr.com/4/3570/3636899450_108a559ea0_b.jpg') top left">
			<div class="ftext"><center><h4 style="color: #866">title 1</h4></center></div>
		</div>
		<div class="back"  style="overflow:hidden">
			<div class="btext" style="overflow:auto; padding-right: 100px; width: 260px; height: 400px">back</div>
		</div>
	</div>
</div>
</div></td> <td>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front"  style="background: url('https://c2.staticflickr.com/4/3570/3636899450_108a559ea0_b.jpg') -286px 0px">
			front
		</div>
		<div class="back">
			back
		</div>
	</div>
</div>
</div></td> </td> <td>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front"  style="background: url('https://c2.staticflickr.com/4/3570/3636899450_108a559ea0_b.jpg') -572px 0px">
			front
		</div>
		<div class="back">
			back
		</div>
	</div>
</div>
</div></td> </td> </tr></table></center>