<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%;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js