Skip to content

Instantly share code, notes, and snippets.

@dax70

dax70/index.html

Created June 26, 2013 03:24
Show Gist options
  • Save dax70/5864529 to your computer and use it in GitHub Desktop.
Save dax70/5864529 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Shubhra.
Raw
index.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapper">
<section class="row">
<div class="container-item">
<div class="item">
<div class="item-overlay">
<a href="#" class="item-button play"><i class="play"></i></a>
<a href="#" class="item-button share share-btn"><i class="play"></i></a>
<div class="sale-tag"><span>SALE</span></div>
</div>
<div class="item-content">
<div class="item-top-content">
<div class="item-top-content-inner">
<div class="item-product">
<div class="item-top-title">
<h2>Ipath lowrunner</h2>
<p class="subdescription">
Low skateshoes - Grey
</p>
</div>
</div>
<div class="item-product-price">
<span class="price-num">$17</span>
<p class="subdescription">$36</p>
<div class="old-price"></div>
</div>
</div>
</div>
<div class="item-add-content">
<div class="item-add-content-inner">
<!-- <div class="section">
<h4>Sizes</h4>
<p>40,41,42,43,44,45</p>
</div> -->
<div class="section">
<a href="#" class="btn buy expand">Buy now</a>
</div>
</div>
</div>
</div>
</div>
<div class="item-menu popout-menu">
<ul>
<li><a href="#" class="popout-menu-item">Share</a></li>
<li><a href="#" class="popout-menu-item">Info</a></li>
<li><a href="#" class="popout-menu-item">Seller</a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
Raw
script.js
$("window").load(function() {
$("#body").removeClass("preload");
});
$(".share-btn").mouseenter(function() {
setTimeout(function() {
$(".item-menu").addClass("visible")
}, 500);
});
$(".share-btn").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".item-menu").hover(function() {
$(".item-menu").addClass("visible")
});
$(".item-menu").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".container-item").hover(function() {
setTimeout(function() {
$(".container-item").css("z-index","1000")
}, 500);
});
Raw
style.css
/* Base settings */
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
html{
font-size:100%; /*Default 16px/1em */
line-height:130%;
font-family: 'Lato', sans-serif;
}
body{
padding: 0 10px 0 10px;
}
/* page setup */
.wrapper{
width:100%;
max-width:1000px;
margin: 30px auto;
}
section.row{
margin:0 0 30px 0;
}
.row{
width: 100%;
display: block;
clear: both;
}
/* Actual content */
.container-item{
/*position: relative;
margin-top:40px;
float:left;
margin-right:20px;*/
position: absolute;
top:50%;
left:50%;
margin-left:-130px;
margin-top:-130px;
}
.item{
width:260px;
height:260px;
background-image: url(http://webstudios.dk/resources/img/ipath-shoes.jpg);
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
position: relative;
top:0;
left:0;
z-index:5;
overflow: hidden;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.item-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-ms-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.item:hover .item-overlay{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
background-color: rgba(0,0,0,0.4);
}
.item-content{
position: absolute;
width:100%;
bottom: 0;
-webkit-transform: translate(0,100%);
-moz-transform: translate(0,100%);
-ms-transform: translate(0,100%);
-o-transform: translate(0,100%);
transform: translate(0,100%);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item:hover .item-content{
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item-top-content{
position: relative;
}
.item-top-content-inner{
position: absolute;
bottom: 0;
padding:10px 15px 10px 15px;
background: rgba(255,255,255,.85);
width:100%;
}
.item-add-content{
padding:0 15px 15px 15px;
opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item:hover .item-add-content{
opacity:1
}
.item-add-content-inner{
border:0px solid #dadada;
border-top-width:1px;
padding-top:10px;
}
/* Buttons */
.item-button{
border-radius:3px;
width:30px;
height:30px;
}
.item-button.play{
background-color:#40c781;
position: absolute;
top: 15px;
left: 15px;
opacity:0;
background-image: url(http://webstudios.dk/resources/img/play-img.png);
}
.item-button.play:hover{
background-color:#34a46c;
}
.container-item:hover .item-button.play{
opacity:1;
}
.item-button.share{
background-color:#4f4f4f;
position: absolute;
top: 50px;
left: 15px;
opacity:0;
background-image: url(http://webstudios.dk/resources/img/share-img.png);
}
.item-button.share:hover{
background-color:#333333;
}
.container-item:hover .item-button.share{
opacity:1;
}
.btn.buy{
background-color: #40c781;
text-align:center;
line-height:42px;
font-weight:700;
color:#fff;
border-radius:3px;
text-decoration:none;
opacity:1;
border:0px solid #35a76e;
border-bottom-width:2px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn.buy:hover{
background-color:#34a46c;
}
.expand{
display:block;
}
/* Tags */
.sale-tag{
width: 50px;
height: 100px;
background: #40c781;
position: absolute;
top:-45px;
right:-10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sale-tag span{
position:absolute;
top:48px;
left:2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
font-size:11px;
color:#fff;
}
/* content */
.item-product{
width:70%;
float:left;
}
.item-product-price{
width:30%;
float:right;
text-align: right;
}
/* Style / Theming */
body{
/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, #FFFFFF), color-stop(1, #E3E3E3));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #E3E3E3 100%);
/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #E3E3E3 100%);
}
/*Prduct title*/
h2{
font-size:1em;
font-weight:400;
color:#222;
}
.subdescription{
font-family: 'helvetica neue';
font-size:0.8em;
font-weight:400;
color:#7d7d7d;
}
/*product price*/
.item-product-price{
color:#40c781;
font-size:1em;
font-weight:700;
position:relative;
font-family:'helvetica neue'
}
.item-product-price .subdescription{
color:#7d7d7d;
}
.old-price{
border:0 solid #7d7d7d;
border-bottom-width:1px;
margin-top:-11px;
width:30px;
position:absolute;
right:-2px;
bottom:10px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.item-content{
background: rgba(255,255,255,.85);
}
.item-add-content{
font-family: 'Lato', sans-serif;
font-weight:400;
color:#7d7d7d;
}
.item-add-content .section{
margin-bottom:10px;
}
.item-add-content .section:last-of-type{
margin-bottom:0;
}
.item-add-content h4{
font-weight:600;
color:#222;
font-size:0.8em;
}
.item-add-content p{
font-size:0.8em;
}
/* Item menu */
.item-menu{
position: absolute;
top:3px;
left:0px;
height:254px;
width:260px;
border-radius:3px 0 0 3px;
background:#4f4f4f;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item-menu.visible{
-webkit-transform: translate(-70px,0);
-moz-transform: translate(-70px,0);
-ms-transform: translate(-70px,0);
-o-transform: translate(-70px,0);
transform: translate(-70px,0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item-menu:hover{
-webkit-transform: translate(-70px,0);
-moz-transform: translate(-70px,0);
-ms-transform: translate(-70px,0);
-o-transform: translate(-70px,0);
transform: translate(-70px,0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/*List*/
.popout-menu ul{
list-style-type:none;
}
.popout-menu ul li{
-webkit-box-shadow: inset 0px 1px rgba(255,255,255,0.1);
box-shadow: inset 0px 1px rgba(255,255,255,0.1);
border-bottom:1px solid #434343;
}
.popout-menu ul li:first-of-type{
-webkit-border-radius: 3px 0;
border-radius: 3px 0;
}
.popout-menu ul li:last-of-type{
border-bottom-width:0px;
}
.popout-menu ul li:hover{
background:#434343;
}
.popout-menu ul li a{
color:#eaeaea;
font-weight:600;
font-size:0.8em;
text-decoration:none;
line-height: 36px;
padding:0 15px;
display:block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment