React.Js Carousel Cards with Hover Effect

This React.Js code snippet helps you to create carousel cards with a hover effect. It defines an array of objects called “cards”, where each object contains an image URL, title, and subtitle. Then, three React components are created: “Article”, “News”, and “App”. The “Article” component renders a single card, which includes the image, title, and subtitle. The “News” component renders a collection of cards using the “Article” component. The number of cards displayed is determined by the length of the “cards” array.

How to Create React.Js Carousel Cards with Hover Effect

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

Create the HTML structure for the carousel card as follows:

<div id="root">Please stand by..</div>

Now, style the carousel card using the following CSS styles:

@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;
}
.cd__main{
display: block !important;
}

.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;
}

Load the following scripts before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.14.5/react-slick.min.js'></script>

Finally, add the following JavaScript function for its functionality:

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({ displayName: "Article",
  render: function () {
    var image = this.props.data.image,
    title = this.props.data.title,
    subtitle = this.props.data.subtitle;
    return /*#__PURE__*/(
      React.createElement("figure", { className: "snip1584" }, /*#__PURE__*/
      React.createElement("img", { src: image }), /*#__PURE__*/
      React.createElement("figcaption", null, /*#__PURE__*/
      React.createElement("h3", null, title), /*#__PURE__*/
      React.createElement("h5", null, subtitle)), /*#__PURE__*/
      React.createElement("a", { href: "#" })));


  } });

var News = React.createClass({ displayName: "News",
  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 /*#__PURE__*/(
          React.createElement("div", { key: index }, /*#__PURE__*/
          React.createElement(Article, { data: item })));


      });
    } else {
      newsTemplate = /*#__PURE__*/React.createElement("p", null, "Please add some cards");
    }
    return /*#__PURE__*/(
      React.createElement("div", { className: "news" }, /*#__PURE__*/
      React.createElement(Slider, settings, newsTemplate), /*#__PURE__*/
      React.createElement("strong", { className: 'news__count ' + (data.length > 0 ? '' : 'none') }, "Total cards: ",
      data.length)));



  } });

var App = React.createClass({ displayName: "App",
  render: function () {

    return /*#__PURE__*/(
      React.createElement("div", { className: "app" }, /*#__PURE__*/
      React.createElement("h3", null, "Cards"), /*#__PURE__*/
      React.createElement(News, { data: cards })));


  } });

ReactDOM.render( /*#__PURE__*/
React.createElement(App, null), document.getElementById('root'));

That’s all! hopefully, you have successfully created React.Js crousel cards with hover effect. If you have any questions or suggestions, feel free to comment below.