Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins");
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: #141E30;
background: -webkit-linear-gradient(to top, #243B55, #141E30);
background: linear-gradient(to top, #243B55, #141E30);
display: flex;
justify-content: center;
align-items: center;
font-family: "Poppins", sans-serif;
overflow: hidden;
}
.card {
border-radius: 16px;
width: 360px;
height: 360px;
background: url(http://devanswer.com/codes/files/thumbnail-split-on-hover.jpg);
position: relative;
overflow: hidden;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.85);
}
.card:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0.92);
}
.card .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
.card .img span {
width: 25%;
height: 100%;
background: url(http://devanswer.com/codes/files/thumbnail-split-on-hover.jpg);
transition: 0.5s;
}
.card .img span:nth-child(1) {
background-position: 0;
transition-delay: 0;
}
.card .img span:nth-child(2) {
background-position: 33.33333%;
transition-delay: 0.1s;
}
.card .img span:nth-child(3) {
background-position: 66.66666%;
transition-delay: 0.2s;
}
.card .img span:nth-child(4) {
background-position: 100%;
transition-delay: 0.3s;
}
.card:hover .img > span {
transform: translateY(-100%);
}
.card:hover .content {
transform: translateY(0%);
transition: 1s;
transition-delay: 0.1s;
}
.content {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
padding: 20px 20px;
width: 100%;
height: 100%;
transform: translateY(100%);
}
</style>
</head>
<body>
<div class="card">
<div class="img"> <span></span><span></span><span></span><span></span></div>
<div class="content">
<h2> MacBook Air</h2>
<h2>Lightness</h2>
<h4>The most loved Mac is about to make you fall in love all over again. Available in silver, space gray, and gold, the new thinner and lighter MacBook Air features a brilliant Retina display, Touch ID, the latest-generation keyboard, and a Force Touch trackpad</h4>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>
