JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="col-1-of-2">
          <div class="bg-video">
            <div class="bg-video__circle">
              &nbsp;
            </div>
          </div>
    </div>

CSS

.bg-video {
  position: relative;
  background-image: linear-gradient(rgba(41, 128, 185, 0.8), rgba(142, 68, 173, 0.8)), url(../img/hero.jpg);
  background-size: cover;
  height: 39rem;
  width: auto;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); }
  .bg-video__circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
    transition: all .4s; }
    .bg-video__circle:hover {
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
      transform: translate3d(-50%, -52%, 0);
      opacity: .8;
      cursor: pointer; }