banner-mit-videos-und-hover-function.php

Quell Code

<style>
    @import url(https://fonts.googleapis.com/css?family=Lato:300);
 
.page-head {
padding:100px 0 100px 0;
  width: 100%;
}
body{
overflow-x:hidden;
}
.page-head h1 {
  color: red;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
}

.items {
  position:relative;

  text-align: center;
  width: 5000px;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}
.items li {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  list-style: none;
  width: 200px;
  height: 120px;
  background-color: black;
  transition-duration: .5s;
  overflow: hidden;
  cursor: pointer;
}
.items li .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}
.items li:hover {
  transition-delay: .5s;
  width: 400px;
  height: 250px;
}
.items li:hover a .content {
  -webkit-transform: translateY(0) translateX(-50%);
          transform: translateY(0) translateX(-50%);
  transition-delay: .75s;
  opacity: 1;
}
.items li a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
}
.items li a .content {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateY(100%) translateX(-50%);
          transform: translateY(100%) translateX(-50%);
  transition-duration: 1s;
  opacity: 0;
  padding: 40px 10px 10px 10px;
  width: 400px;
}
.items li a .content h2 {
  font-weight: 300;
  color: white;
  font-size: 30px;
}

footer{
position:relative;
bottom:0;

}	
</style>
<header class="page-head"><h1>Netflix</h1></header>

<ul class="items">
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/orangeisthenewblack.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Orange is the new black</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/uglybetty.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Ugly Betty</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/big.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Big</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/apprentice.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>The Apprentice</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/veep.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Veep</h2>
			</div>
		</a>
	</li>
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/orangeisthenewblack.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Orange is the new black</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/uglybetty.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Ugly Betty</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/big.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Big</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/apprentice.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>The Apprentice</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/veep.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Veep</h2>
			</div>
		</a>
	</li>
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/orangeisthenewblack.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Orange is the new black</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/uglybetty.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Ugly Betty</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/big.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Big</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/apprentice.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>The Apprentice</h2>
			</div>
		</a>
	</li>
	
	<li>
		<div class="bg-img" style="background-image: url('http://lewihussey.com/codepen-img/veep.jpg');"></div>
		<a href="#">
			<div class="content">
				<h2>Veep</h2>
			</div>
		</a>
	</li>
</ul>