<div id="root">Please stand by..</div>
@import url(https://fonts.googleapis.com/css?family=Raleway);
.snip1584 {
  font-family: 'Monospace', sans-serif;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  font-size: 16px;
  text-align: left;
}
.snip1584 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1584:before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  top: 100%;
  content: '';
  background-color: rgba(51, 51, 51, 0.9);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.snip1584 img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}
.snip1584 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.snip1584 h3,
.snip1584 h5 {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}
.snip1584 h3 {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  text-transform: uppercase;
  font-weight: 400;
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
  margin-bottom: 5px;
}
.snip1584 h5 {
  font-weight: normal;
  background-color: #ae895d;
  padding: 3px 10px;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1584 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.snip1584:hover:before,
.snip1584.hover:before {
  top: 10px;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.snip1584:hover h3,
.snip1584.hover h3,
.snip1584:hover h5,
.snip1584.hover h5 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.snip1584:hover h3,
.snip1584.hover h3 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.snip1584:hover h5,
.snip1584.hover h5 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
/* Demo purposes only */
body {
  background-color: #212121;
  text-align: center;
	color: white;
}
.app{
	width: 1200px;
	margin: auto;
	font-family: 'Raleway';
	font-size: 24px;
}
var cards = [
	 {"image":"https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg", 
   "title":"Burgundy Flemming", 
   "subtitle":"Advertising"},
  {"image":"https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample119.jpg", 
   "title":"Nigel Nigel", 
   "subtitle":"Sound & Vision"},
  {"image":"https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample120.jpg", 
   "title":"Caspian Bellevedere", 
   "subtitle":"Accounting"}
];
var Article = React.createClass({
	render: function() {
		var image = this.props.data.image,
				title = this.props.data.title,
				subtitle = this.props.data.subtitle;
		return (
			<figure className="snip1584">
				<img src={image} />
				<figcaption>
					<h3>{title}</h3>
					<h5>{subtitle}</h5>
				</figcaption><a href="#"></a>
			</figure>
		)
	}
});
var News = React.createClass({
	render: function() {
		var data = this.props.data;
		var newsTemplate;
		var settings = {
    	dots: true,
			infinite: true,
  		slidesToShow: 3,
  		slidesToScroll: 1,
    }
		if (data.length > 0) {
			newsTemplate = data.map(function(item, index) {
				return (
						<div key={index}>
							<Article data={item} />
						</div>
				)
			})
		} else {
			newsTemplate = <p>Please add some cards</p>
		}
		return (
			<div className='news'>
				<Slider {...settings}>{newsTemplate}</Slider>
				<strong className={'news__count ' + (data.length > 0 ? '':'none') }>
					Total cards: {data.length}
				</strong>
			</div>
		);
	}
});
var App = React.createClass({
	render: function() {
		
		return (
			<div className='app'>
				<h3>Cards</h3>
				<News data={cards} />
			</div>
		);
	}
});
ReactDOM.render(
	<App />,document.getElementById('root')
);
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.14.5/react-slick.min.js