Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body {
background: #3C385C;
background: -webkit-linear-gradient(to right, #3C385C, #6c6896);
background: linear-gradient(to right, #3C385C, #6c6896);
width: 100%;
font-family: 'Open Sans', sans-serif;
}
.outer-container {
margin: 100px auto 0 auto;
width: 100%;
max-width: 500px;
}
.container {
width: 200px;
height: 250px;
border-radius: 10px;
float: left;
position: relative;
top: 0;
z-index: 1;
box-shadow: 0 5px 10px 0px #3C385C;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.container1 {
background: #5967C3;
background: -webkit-linear-gradient(left top, #5967C3, #83cedc);
background: linear-gradient(to bottom right, #5967C3, #83cedc);
}
.container2 {
background: #ffaec2;
background: -webkit-linear-gradient(left top, #ffaec2, #7e4aaf);
background: linear-gradient(to bottom right, #ffaec2, #7e4aaf);
margin-left: -50px;
z-index: 2;
}
.container3 {
background: #CA619C;
background: -webkit-linear-gradient(left top, #CA619C, #DBC084);
background: linear-gradient(to bottom right, #CA619C, #DBC084);
margin-left: -50px;
}
.active {
z-index: 3;
top: -25px;
height: 300px;
}
.title {
color: #FFF;
font-size: 1.2rem;
text-align: center;
margin-top: 15px;
}
.title::after {
content: '';
display: block;
height: 3.5px;
width: 13px;
background-color: #FFF;
border-radius: 15px;
margin: 5px auto 0 auto;
}
.main_number {
position: absolute;
top: 52%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
font-size: 11rem;
color: #FFFFFF;
opacity: 0.2;
font-weight: 800;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.main_number::before {
content: '£';
font-size: 2rem;
position: absolute;
top: 40px;
left: 40px;
}
.active .main_number {
top: 45%;
}
.container a {
text-decoration: none;
color: #3C385C;
font-weight: 800;
font-size: 0.7rem;
background-color: #FFF;
width: 170px;
line-height: 40px;
display: block;
border-radius: 30px;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.container a span {
opacity: 0.6;
}
.active a {
bottom: -20px;
}
.active a span {
opacity: 1;
}
.container_text {
position: absolute;
top: 52%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
color: #FFFFFF;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.active .container_text {
top: 65%;
}
.container_text span {
display: block;
}
.container_text1 {
font-size: 0.9rem;
}
.container_text2 {
font-size: 2.5rem;
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="outer-container">
<div class="container container1">
<div class="inner_container">
<div class="title">Individual</div>
<div class="main_number">2</div>
<div class="container_text">
<div class="container_text1">Simple</div>
<div class="container_text2">20 gb</div>
</div>
</div>
<a><span>Continue</span></a>
</div>
<div class="container container2 active">
<div class="inner_container">
<div class="title">Shared</div>
<div class="main_number">6</div>
<div class="container_text">
<div class="container_text1">Family</div>
<div class="container_text2">100 gb</div>
</div>
</div>
<a><span>Continue</span></a>
</div>
<div class="container container3">
<div class="inner_container">
<div class="title">Group</div>
<div class="main_number">9</div>
<div class="container_text">
<div class="container_text1">Business</div>
<div class="container_text2">500 gb</div>
</div>
</div>
<a><span>Continue</span></a>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(".container").click(function(){
$(".container").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
