JSFiddle - React, Tailwind, and code Playground

by steveambielli

HTML

<script src="http://animejs.com/anime.min.js"></script>
<div id="featured-items">
<div class="content-box call-out" style="background-image: url(http://1.bp.blogspot.com/-7TEyWcB0lQc/UO8EOju8XFI/AAAAAAAARJ4/SHt0G6DBKyY/s1600/Graphic+Abstract+Wallpapers+05.jpg);"><a class="img-link" href="#">
					<div class="gradient"></div>
					<div class="content">
						<p>EXPLORE <i class="fa fa-arrow-right" aria-hidden="true"></i></p>
						<h4 class="title">See how we've helped our clients</h4>
				 	</div>
				 </a></div>
<div class="content-box call-out" style="background-image: url(http://www.firsthdwallpapers.com/uploads/2013/07/bubbles-macro-drop-ppt-backgrounds-powerpoint.jpg);"><a class="img-link" href="#">
					<div class="gradient"></div>
					<div class="content">
						<p>EXPLORE <i class="fa fa-arrow-right" aria-hidden="true"></i></p>
						<h4 class="title">See how we've helped our clients</h4>
				 	</div>
				 </a></div>
<div class="content-box call-out" style="background-image: url(https://wallpapercave.com/wp/4CPD0e9.jpg);"><a class="img-link" href="#">
					<div class="gradient"></div>
					<div class="content">
						<p>EXPLORE <i class="fa fa-arrow-right" aria-hidden="true"></i></p>
						<h4 class="title">See how we've helped our clients</h4>
				 	</div>
				 </a></div>
</div>

CSS

#featured-items {
	margin-top: 70px;
  
}

	#featured-items .content-box {
		width: 33%;
		height: 520px;
		display: inline-block;
		position: relative;
		margin-right: -5px;
		background-size: cover;
		background-position: center center;
  }
		
		#featured-items .content-box @keyframes slide_to_top {
			0% {
				top: 50%;
			}
			100% {
				top: 0;
			}
		}
		
		#featured-items .content-box.zoom {
			/*position: fixed;
			margin-left: auto;
			margin-right: auto;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			animation: slide_to_top 1s;
			animation-fill-mode: forwards;*/
			position: absolute;
			margin-left: auto;
			margin-right: auto;
			left: 0;
			right: 0;
			-webkit-transform: translate3d(-50%,-50%,0);
			transform: translate3d(-50%,-50%,0);
    }
			
			#featured-items .content-box.zoom:hover {
				transform: scale(1);
			}
      
		#featured-items .content-box:hover {
			transform: scale(1.2);
			z-index: 20;
    }
			
			#featured-items .content-box a {}
				#featured-items .content-box a.gradient {
					z-index: 10;	
				}
				
				#featured-items .content-box img {
					z-index: 9;	
				}
				
				#featured-items .content-box .content {
					z-index: 11;	
				}
				
				#featured-items .content-box:hover {
					text-decoration: none;	
				}
		
		#featured-items a {
			display: block;
    }
			
			#featured-items a:hover {
				position: relative;
				z-index: 99999;
				text-decoration: none;
			}
			
			#featured-items a .gradient {
				position: absolute;
				left: 0;
				width: 100%;
				height: 520px;
				z-index: 1;
				background: linear-gradient(0deg,rgba(0,0,0,0) 50%,#1f1f1f 100%);	
			}
			
			#featured-items a img {
				position: absolute;
				left: 0;
				width: 100%;
				z-index: 0;	
			}
			
			#featured-items a .content {
				padding: 40px;
				position: relative;
				z-index: 1;
      }
				
				#featured-items a .content  p {
					font-size: 14px;
					text-transform: uppercase;	
					padding-bottom:...

JavaScript

var basicTimeline = anime.timeline({
  targets: '#featured-items .content-box',
  translateX: 250
});

//handle featured item animation
$('#featured-items .content-box a').click(function(){
  basicTimeline.play();
  return false;
});