JSFiddle - React, Tailwind, and code Playground

by Yure Pereira

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="fancy-flix-scrolls">

<div class="fancy-flix">
  <div class="flick">
    <img class="thumb" src="https://i.imgur.com/x7fWLs4.jpg" />
    <div class="info">
      <div class="text">
        <p>
          Gato Bolado no unicrono 
        </p>
        <p>
          1:06 
        </p>
      </div>
      <button>Assistir <i class="fa fa-play"></i></button>
    </div>
  </div>
  <div class="flick">
    <img class="thumb" src="https://i.imgur.com/x7fWLs4.jpg" />
    <div class="info">
      <div class="text">
        <p>
          Gato Bolado no unicrono 
        </p>
        <p>
          1:06 
        </p>
      </div>
      <button>Assistir <i class="fa fa-play"></i></button>
    </div>
  </div>
  <div class="flick">
    <img class="thumb" src="https://i.imgur.com/x7fWLs4.jpg" />
    <div class="info">
      <div class="text">
        <p>
          Gato Bolado no unicrono 
        </p>
        <p>
          1:06 
        </p>
      </div>
      <button>Assistir <i class="fa fa-play"></i></button>
    </div>
  </div>
  <div class="flick">
    <img class="thumb" src="https://i.imgur.com/x7fWLs4.jpg" />
    <div class="info">
      <div class="text">
        <p>
          Gato Bolado no unicrono 
        </p>
        <p>
          1:06 
        </p>
      </div>
      <button>Assistir <i class="fa fa-play"></i></button>
    </div>
  </div>
  <div class="flick">
    <img class="thumb" src="https://i.imgur.com/x7fWLs4.jpg" />
    <div class="info">
      <div class="text">
        <p>
          Gato Bolado no unicrono 
        </p>
        <p>
          1:06 
        </p>
      </div>
      <button>Assistir <i class="fa fa-play"></i></button>
    </div>
  </div>
  <div class="flick">
    <img class="thumb" src="https://i.imgur.com/x7fWLs4.jpg" />
    <div class="info">
      <div class="text">
        <p>
          Gato Bolado no unicrono 
        </p>
  ...

SCSS

body {
  background: #121122;
  font-family: 'Verdana', sans-serif;
}

.fancy-flix-scrolls {
  overflow-x: auto;
  width: 100%;
}

.fancy-flix {
  display: block;
  flex-flow: row nowrap;
  width: auto;
  max-width: none;
  overflow-x: visible;
  white-space: nowrap;
}

.flick {
  width: 32vmax;
  height: 18vmax;
  margin: 4px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  &:hover {
    .thumb {
      transform: scale(1.2);
    }
    .info {
      opacity: 1;
    }
  }
  .thumb {
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    transition: 200ms ease-out;
    transform: scale(1);
  }
  .info {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    color: #f2f2f2;
    transition: 200ms ease-out;
    opacity: 0;
    .text {
      position: absolute;
      bottom: 0; left: 0;
      padding: 4px;
      p {
        padding: 0; margin: 0; margin-bottom: 4px;
      }
    }
    button {
      position: absolute;
      top: 0; right: 0;
      border: none;
      background: transparent;
      font-size: 1.2em;
      padding: 4px;
      font-weight; 700;
      color: #E22;
      cursor: inherit;
    }
  }
}