JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<div class="thumb scroll" style="width:200px;height:200px;">
        <div class="thumb-wrapper">
		<div class="thumb-front" style="background:#ff3030; color:#ffffff; border-color:#ffffff;padding-top:50px;">Title</div>
		<div class="thumb-detail" style="background:#ffffff;"><div class="thumb-detail-header">Title</div>Details</div>
		</div>
		</div>

CSS

.thumb {
/* display:block; - to be able to use display:hidden in parent for responsiveness */
position:relative;
margin-bottom:20px;
margin-right:20px;
float:left;
}

.thumb-wrapper {
display:block;
width:100%;
height:100%;
}

/* Front */
.thumb .thumb-front {
width:100%;
height:100%;
position:absolute;
display:block;
}

/* Back */
.thumb .thumb-detail {
display:block;
width:100%;
height:100%;
position:absolut;
left:0;
top:0;

border-width:1px; !important;
border-color:#ff6600; !important;
border-style:solid;
padding:15px;
}

/* Back Header */
.thumb .thumb-detail-header {
font-size: 16px;!important;
margin-bottom:5px;
text-align:left;
}

/* Back Text */
.thumb .thumb-detail, .thumb .thumb-detail p {
font-size: 13px;!important;
color: #595959;!important;
line-height: 1.4em;!important;
text-align:justify;   
}


/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}

.thumb.scroll .thumb-detail {
bottom:-400px;
}

/*
* CSS3 Flip
*/
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}

.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.thumb.flip .thumb-front,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.thumb.flip .flipIt {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform:...

JavaScript

$(function () {
	

		if ($('html').hasClass('csstransforms3d')) {	
		
			$('.thumb').removeClass('scroll').addClass('flip');		
			$('.thumb.flip').hover(
				function () {
					$(this).find('.thumb-wrapper').addClass('flipIt');
				},
				function () {
					$(this).find('.thumb-wrapper').removeClass('flipIt');			
				}
			);
			
		} else {

			$('.thumb').hover(
				function () {
					$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
				},
				function () {
					$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');			
				}
			);

		}
	
	});