JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<li class="employee">
    <div class="employee_container">
        <div class="front flip">
            <img src="http://www.piratealumni.com/s/722/images/editor/headshots/AshleyPerson.jpg" alt="">			     	</div>
            <div class="back flip">
                <h2>Title</h2>
                <h3>Lorem ipsum</h3>
                <p>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
            </div>
        </div>
    </li>

CSS

.employee {
	width:33%;
	float:left;
	display:block;
	padding:0.5em;
	height:20em;
}

.employee_container {
	height:100%;
	position:relative;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
}

.back, .front {
	border: 3px solid #cecece;
	position:absolute;
}

.front img {
	min-height:100%;
	height:auto;
	width:auto;
	width:100%;
}

.front {
	overflow:hidden;
	width:100%;
	height:100%;
	z-index:900;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;

	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.active .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}

.back {
	background-image: url(img/RD.png);
	background-repeat: no-repeat;
	background-position:90% 93%;
	padding:1em;
	background-color:#ecad40;
	height:100%;
	width:100%;
	z-index:800;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;

	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.active .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}

.back h3 {
	font-weight:normal;
	font-size:0.8em;
}

.back p {
	font-size:1em;
	padding-top:1em;
	border-top:1px dashed white;
	margin-top:1em;
}

JavaScript

$('.employee_container').hover(function(){
    $(this).addClass('active');
},function(){
    $(this).removeClass('active');
});