JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio_submain">
					<div class="portfolio_project">
						<div class="prj effect_r">
							<div class="image" style="background-image: url('http://webandad.com/gallery/portfolio/s_81.jpg');"></div>
							<div class="descr">
								<div class="slide_fon"><div></div></div>
								<div class="slide_content">
									<div class="name">Pain management in NYC</div>
									<div class="cont">Website for doctor in Manhattan.
Simple website with integrated blog and appointment scheduler.
Doctor has offices in NYC and NJ.
</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>

CSS

.portfolio_project {
	width: 261px;
	height: 230px;
	margin: 0 13px;
	float: left;
}

.portfolio_project .prj {
	border: 1px solid #e2e2e2;
	Border-Radius: 100px;
	width: 200px;
	height: 200px;
	position: relative;
	overflow: hidden;
}

.portfolio_project .prj .image {
	position: absolute;
	width: 200px;
	height: 200px;
	Border-Radius: 100px;
	background-position: center center;
	background-repeat: no-repeat;
}

.portfolio_project .prj .descr {
	left: -265px;
	position: absolute;
	overflow: hidden;
}

.portfolio_project .prj .slide_fon {
	position: absolute;
	opacity: 0.70;
	filter: alpha(opacity=70);
	Border-Radius: 4px;
	padding: 9px;
	background-color: #000;
	width: 200px;
	height: 200px;
}

.portfolio_project .prj .slide_fon div {
	background-color: #000;
	background: linear-gradient(top, #000, #000);
	/* Для WebKit (Safari, Google Chrome и т.д.) */
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
	/* Для Mozilla/Gecko (Firefox и т.д.) */
	background: -moz-linear-gradient(top, #000, #000);
	/* Для Internet Explorer 8 */
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#90cde0, endColorstr=#39859d);
	/* Для Opera */
	background: -o-linear-gradient(top, #90cde0, #39859d);
	width: 243px;
	height: 182px;
}

.portfolio_project .prj .slide_content {
	position: relative;
	padding: 15px 25px 20px 25px;
	width: 211px;
	height: 165px;
}



.portfolio_project .prj .slide_content .name {
	padding-top: 0px;
	color: #005876;
	font-size: 18px;
	font-weight: normal;
	text-align: left;
	padding-bottom: 5px;
}

.portfolio_project .prj .slide_content .cont {
	color: #fff;
	font-size: 14px;
	atext-align: justify;
	width: 211px;
}

.portfolio_project .prj .info {
	position: relative;
	width: 261px;
}

.portfolio_project .prj .info div {
	position: absolute;
	background-image: url('../images/_icons_vert.png');
	background-position: right -694px;
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	right:...

JavaScript

function rotateElem( elem, deg, w, h ) {

		var style = elem.style;

		if ( elem.ownerDocument && elem.ownerDocument.defaultView ) {
			style = elem.ownerDocument.defaultView.getComputedStyle( elem, null );
		} else if ( elem.currentStyle ) {
			style = elem.currentStyle;
		}

		if ( eval("/*@cc_on @_jscript_version;@*/") <= 5.8 ) {

			var rad = ( deg * Math.PI ) / 180.0,
				cos = Math.cos(rad),
				sin = Math.sin(rad);

			elem.originalWidth = w || elem.originalWidth || elem.offsetWidth;
			elem.originalHeight = h || elem.originalHeight || elem.offsetHeight;

			elem.style.filter = style.filter.replace( /progid:DXImageTransform.Microsoft.Matrix\([^)]*\)[;]?/g, "" ) +
				"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+cos+",M12="+(-sin)+",M21="+sin+",M22="+cos+")";

			elem.style.marginLeft = -Math.round( ( elem.offsetWidth - elem.originalWidth ) / 2 );
			elem.style.marginTop =- Math.round( ( elem.offsetHeight - elem.originalHeight ) / 2 );
		} else {
			var Transform = (style.transform||style.OTransform||style.MozTransform||style.WebkitTransform||style.msTransform)+"";

			elem.style.OTransform =
			elem.style.MozTransform =
			elem.style.WebkitTransform =
			elem.style.msTransform =
			elem.style.transform = Transform.replace( /(none|[\s]?(rotate|matrix)\([^)]*\))/g, "" ) + " rotate(" + deg + "deg)";
		}
	}

	// -------------------------------------------------------------------------
	// Простые эффекты для Portfolio
	// -------------------------------------------------------------------------
	var direction = [
		
		[	// Эффект появления с центра блока разварачиваеться с плавным изменением прозрачности
			{"duration": 300, step: function( now, data ){
				if ( data.prop == "left" ) {
					jQuery( data.elem ).find(".slide_fon").css("left", "-" + now + "px" );
					jQuery( data.elem ).find(".slide_content").css("margin-left", "-" + now + "px" );
					jQuery( data.elem ).find(".controls").css("left", "-" + now + "px"...