<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="cinema-card">
  <div class="cinema-light">
  </div>
  <span>
    FRI · 21:30
  </span>
  <h3>
    After the rain
  </h3>
  <p>
    Hall 4
    <i>
      Seat F12
    </i>
  </p>
  <b>
    ◉
  </b>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.cinema-card{position:relative;width:238px;height:157px;padding:19px;overflow:hidden;border-radius:15px;background:#23202a;color:#fff;font-family:Arial;box-shadow:0 10px 19px #211b2e40}.cinema-light{position:absolute;top:-140px;left:50%;width:80px;height:230px;background:linear-gradient(#ffe4a755,transparent);transform:translateX(-50%) rotate(12deg);filter:blur(3px);transition:width .45s}.cinema-card>*:not(.cinema-light){position:relative;z-index:1}.cinema-card span{font-size:9px;font-weight:800;letter-spacing:1px;color:#f4c57d}.cinema-card h3{margin:34px 0 7px;font-size:24px}.cinema-card p{margin:0;font-size:11px;color:#bdb5c5}.cinema-card p i{float:right;font-style:normal;color:#8ce3ce}.cinema-card>b{position:absolute;right:17px;top:17px;color:#f16d88}.cinema-card:hover .cinema-light{width:165px}