JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div id="header">


<div class="photo">
  <div class="overlay"></div>
</div>
</div>

CSS

body {
  margin: 0;
}

#header {
  height: 100vh;
}

.photo {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.photo:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  
  background-image: url(http://hdqwalls.com/wallpapers/goose-the-cat-in-captain-marvel-p8.jpg);
  background-position: center -50px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  
  /*animation: 1s zoom both reverse;/* zoom out */
  /*animation: 1s zoom both alternate;/* zoom in */
  animation: 9s zoom infinite alternate;/* zoom in and out infinite or number */
  animation-delay: 0s;
  
  /*animation: 1s move both reverse;/* left to right */
  /*animation: 1s move both alternate;/* right to left */
  /*animation: 50s move infinite alternate;/* infinite right to left */
}

@keyframes zoom {
  0%{transform: scale(1)}
  100%{transform: rotate(-4deg) scale(1.5)}  
}

@keyframes move {
  0%{transform: scale(1.3)}
  100%{transform: scale(1.4) translateX(14%)}  
}

.overlay{
  background-color: #000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}