Inspired by the new Netflix site has these cool cards when you hover the image.
A Pen by Lewi Hussey on CodePen.
<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> |
Inspired by the new Netflix site has these cool cards when you hover the image.
A Pen by Lewi Hussey on CodePen.
@import url(http://fonts.googleapis.com/css?family=Lato:300); | |
*{ | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
} | |
body{ | |
font-family: 'Lato', sans-serif; | |
background-color: rgb(20, 23, 26); | |
} | |
.page-head{ | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
h1{ | |
color: red; | |
text-align: center; | |
text-transform: uppercase; | |
padding: 20px; | |
} | |
} | |
.items{ | |
position: fixed; | |
top: 50%; | |
left: 50%; | |
text-align: center; | |
width: 5000px; | |
transform: translateY(-50%) translateX(-50%); | |
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; | |
.bg-img{ | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-size: cover; | |
background-position: center top; | |
} | |
&:hover{ | |
transition-delay: .5s; | |
width: 400px; | |
height: 250px; | |
a{ | |
.content{ | |
transform: translateY(0) translateX(-50%); | |
transition-delay: .75s; | |
opacity: 1; | |
} | |
} | |
} | |
a{ | |
color: white; | |
text-decoration: none; | |
cursor: pointer; | |
width: 100%; | |
height: 100%; | |
display: block; | |
position: relative; | |
z-index: 2; | |
.content{ | |
background: linear-gradient(transparent, rgba(0, 0, 0, .75)); | |
width: 100%; | |
height: 100px; | |
position: absolute; | |
bottom: 0; | |
left: 50%; | |
transform: translateY(100%) translateX(-50%); | |
transition-duration: 1s; | |
opacity: 0; | |
padding: 40px 10px 10px 10px; | |
width: 400px; | |
h2{ | |
font-weight: 300; | |
color: white; | |
font-size: 30px; | |
} | |
} | |
} | |
} | |
} |