<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<ul>
<i class='fa fa-shopping-cart'>
<span class='counter'></span>
</i>
</ul>
</header>
<div class='row'>
<div class='product--blue'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Women)</p>
<p>Size 7</p>
<p>Price £199.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--orange'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Men)</p>
<p>Size 10</p>
<p>Price £99.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--red'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Women)</p>
<p>Size 8</p>
<p>Price £399.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--green'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Men)</p>
<p>Size 11</p>
<p>Price £299.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--yellow'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Women)</p>
<p>Size 11</p>
<p>Price £299.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
<div class='product--pink'>
<div class='product_inner'>
<img src='http://wellandgood.com/wp-content/uploads/2012/07/Nike-Free-30-Womens-Running-Shoe-511495_600_A.png' width='300'>
<p>Nike Air (Men)</p>
<p>Size 11</p>
<p>Price £299.99</p>
<button>Add to basket</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
}
html, body {
background: #EEE5E9;
}
header {
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
header ul {
padding: 1.2em 0 0.5em;
}
header span {
padding: 0 0 0 0.5em;
}
header span, header i {
color: #2B2D42;
}
header i:nth-of-type(2) {
cursor: pointer;
}
.row {
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.product, .product--blue, .product--orange, .product--red, .product--green, .product--yellow, .product--pink {
box-shadow: 1px 5px 15px #CCC;
width: 15em;
height: auto;
border-radius: 3px;
padding: 2em;
margin: 1em;
overflow: hidden;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.product--blue {
background: -webkit-linear-gradient(135deg, #92DCE5 50%, rgba(255, 255, 255, 0.5) 50%);
background: linear-gradient(-45deg, #92DCE5 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--orange {
background: -webkit-linear-gradient(135deg, #EF6F6C 50%, rgba(255, 255, 255, 0.5) 50%);
background: linear-gradient(-45deg, #EF6F6C 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--red {
background: -webkit-linear-gradient(135deg, #E84855 50%, rgba(255, 255, 255, 0.5) 50%);
background: linear-gradient(-45deg, #E84855 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--green {
background: -webkit-linear-gradient(135deg, #70C1B3 50%, rgba(255, 255, 255, 0.5) 50%);
background: linear-gradient(-45deg, #70C1B3 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--yellow {
background: -webkit-linear-gradient(135deg, #E8DB7D 50%, rgba(255, 255, 255, 0.5) 50%);
background: linear-gradient(-45deg, #E8DB7D 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product--pink {
background: -webkit-linear-gradient(135deg, #FF386D 50%, rgba(255, 255, 255, 0.5) 50%);
background: linear-gradient(-45deg, #FF386D 50%, rgba(255, 255, 255, 0.5) 50%);
}
.product img, .product--blue img, .product--orange img, .product--red img, .product--green img, .product--yellow img, .product--pink img {
max-width: 100%;
height: auto !important;
text-align: center;
}
.product_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.product_inner p {
color: rgba(255, 255, 255, 0.9);
}
.product_inner button {
border: 1px solid rgba(255, 255, 255, 0.5);
color: #FFF;
border-radius: 3px;
padding: 1em 3em;
margin: 1em 0 0 0;
background: none;
cursor: pointer;
-webkit-transition: background ease-in .25s;
transition: background ease-in .25s;
}
.product_inner button:hover {
background: white;
color: #2B2D42;
}
.product_inner button:before {
font-family: FontAwesome;
content: '\f07A';
color: #FFF;
position: absolute;
font-size: 1.5em;
margin: 0 -1.5em;
}
.product_inner button:hover:before {
color: #2B2D42;
}
.product_overlay {
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.product_overlay h2 {
color: rgba(43, 45, 66, 0.7);
font-size: 1.2em;
margin: 1em 0;
}
.product_overlay i {
color: rgba(43, 45, 66, 0.7);
font-size: 1.5em;
}
$(function() {
"use strict"
var init = "No items yet!";
var counter = 0;
// Initial Cart
$(".counter").html(init);
// Add Items To Basket
function addToBasket() {
counter++;
$(".counter").html(counter).animate({
'opacity' : '0'
},300, function() {
$(".counter").delay(300).animate({
'opacity' : '1'
})
})
}
// Add To Basket Animation
$("button").on("click", function() {
addToBasket(); $(this).parent().parent().find(".product_overlay").css({
'transform': ' translateY(0px)',
'opacity': '1',
'transition': 'all ease-in-out .45s'
}).delay(1500).queue(function() {
$(this).css({
'transform': 'translateY(-500px)',
'opacity': '0',
'transition': 'all ease-in-out .45s'
}).dequeue();
});
});
});
