<div id="card_container" data-offset="2">
  <div class="pg">
    <img src="https://pluspng.com/img-png/aquaman-png-aquaman-png-clipart-666.png">
  </div>
  <div id="card">
    <div class="shine"></div>
    <div class="text-block">
      <h1>Aquaman <small>(2018)</small></h1>
      <h3>Action | Adventure</h3>
      <p>
        Arthur Curry learns that he is the heir to the underwater kingdom of Atlantis, and must step forward to lead his people and be a hero to the world.
      </p>
      <button>Watch Trailer</button>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Rubik:400,900);

* {
  box-sizing:border-box;
}
body, html {
  height:100%;
  min-height:100%;
}
body {
  background:linear-gradient(#f6f7fc 0%, #d5e1e8 40%);
  transform-style:preserve-3d;
  transform:perspective(800px);
  font-family:'Lato', Sans-serif;
}
#card_container {
  width:700px;
  height:350px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-175px 0 0 -350px;
}
#card {
  animation:backAn 50s infinite;
  color:#fff;
  padding:30px;
  width:100%;
  height:100%;
  position:absolute;
  z-index:1;
  background:url(https://riverbeats.life/neworleans/wp-content/uploads/2018/07/Atlantis.png) 100% bottom;
  /*background:url(http://riccardotartaglia.it/img/deadpool/back.jpg) 100% bottom;*/
  /*box-shadow:0px 45px 100px rgba(0, 0, 0, 0.4), inset 0 0 0 1000px rgba(156, 27, 27, 0.6);*/
  box-shadow:0px 45px 100px rgba(0, 0, 0, 0.4), inset 0 0 0 1000px rgba(0, 76, 86, 0.6);
}
#card .text-block {
  position:relative;
  z-index:2;
  text-shadow:0 3 10 rgba(0, 0, 0, 0.7);
}
#card .text-block h1 {
  font-family:'Rubik', Sans-serif;
  font-size:3em;
  margin:0;
  text-transform:uppercase;
  font-weight:700;
}
#card .text-block h1 small {
  font-size:.4em;
  color:#ccc;
  position:relative;
  bottom:10px;
}
#card .text-block h3 {
  margin:0;
  font-weight:700;
}
#card .text-block p {
  font-weight:300;
  width:60%;
}
#card .text-block button {
  transition:all 0.35s cubic-bezier(0.37, 0.26, 0.35, 1);
  border:4px solid #fff;
  padding:10px;
  background:transparent;
  font-family:'Rubik', Sans-serif;
  text-transform:uppercase;
  font-weight:700;
  cursor:pointer;
}
#card .text-block button:hover {
  background:#004c56;
}
#card_container .pg {
  position:absolute;
  height:450px;
  width:40%;
  right:-10px;
  bottom:0px;
  z-index:2;
}
#card_container .pg > img{
  height:450px;
}
.shine {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 60%);
  z-index:1;
}
button {
  color:#fff;
}
@keyframes backAn {
  0% {
    background-size:100%;
  }
  50% {
    background-size:250%;
  }
  100% {
    background-size:100%;
  }
}