JSFiddle - React, Tailwind, and code Playground

by jessuni

HTML

some text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text beforesome text before
<br style="clear:both;">

<div id="wrap">
    
<div class="quarter">

	<div class="up">
	    <div class="inner" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg)"></div>
		</div>

	<div class="face">
		<div class="top" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg)"></div>
		<div class="bot" style="background-image: urlhttps://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg)"></div>
	</div>

	<div class="cote-droit">
		<div class="inner">
			<div class="cote-droit-top" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg)"></div>
			<div class="cote-droit-bot" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg)"></div>
		</div>
	</div>
</div>
    
</div>

some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some text after some...

CSS

#wrap
	{
		background:yellow;
		height:66px;
		width:55px;
		padding:10px;

		-webkit-transition:0.5s all;
		-moz-transition:0.5s all;
		/* more transition here */
	}

	#wrap:hover
	{
		height:300px;
		width:260px;
	}

	.quarter
	{
		padding:20px;
		-webkit-transform: scale(0.2);
		-moz-transform: scale(0.2);
		-o-transform: scale(0.2);
		transform: scale(0.2);
		background:red;
		width:250px;
		-webkit-transform-origin:left top;
		-webkit-transition:0.5s all;
		-moz-transition:0.5s all;
		/* more transition here */
	}


	#wrap:hover .quarter
	{
		-webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		-o-transform: scale(0.9);
		transform: scale(0.9);
		-webkit-transform-origin:left top;
		-moz-transform-origin:left top;
		/* more transform-origin */
	}


/* FACE AVANT - ARRIERE
   ========================================================================== */

.face, .arriere, .cote-droit, .cote-gauche, .up
{
	padding:20px;
	display: inline-block;
}

.face .top
{
	width: 163.491px;
	height: 72.49px;
	background-position: -64.076px -604.822px;
	background-repeat: no-repeat;
}

.face .bot
{
	width: 163.491px;
	height: 179.991px;
	background-position: -64.076px -40.559px;
	background-repeat: no-repeat;
}

.face-arriere
{
	width: 164.169px;
	height: 252.167px;
	background-position: -64.076px -284.584px;
	background-repeat: no-repeat;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* FACE HAUT
   ========================================================================== */

.up .inner
{
	width: 164.169px;
	height: 66.536px;
	background-position: -64.076px -539.285px;
	background-repeat: no-repeat;
	filter: brightness(0.9);
	-webkit-filter: brightness(0.9);
	-moz-filter: brightness(0.9);
	-o-filter: brightness(0.9);
	-ms-filter: brightness(0.9); 
}

.safari .up .inner 
{
	-webkit-filter: brightness(-0.1);
}

/* COTES
  ...