Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Last active May 17, 2020
Embed
What would you like to do?
Product Preview(hover)
<main role="main">
<div class="product">
<figure>
<img src="https://raw.githubusercontent.com/itbruno/productpreview/master/assets/img/t-shirt.jpg" alt="Product Image" class="product-image">
</figure>
<div class="product-description">
<div class="info">
<h1>LOREM IPSUM</h1>
<p>
Lorem Ipsum is simply dummy
printing and typesetting industry
</p>
</div>
<div class="price">
89
</div>
</div>
<div class="product-sidebar">
<button class="buy">
<span>BUY ITEM</span>
</button>
<button class="info">
<span>MORE INFO</span>
</button>
<button class="size">
<span>SIZES</span>
</button>
<button class="colors">
<span>
<a href="" class="color black"></a>
<a href="" class="color white"></a>
<a href="" class="color red"></a>
</span>
</button>
</div>
</div>
</main>
// Product Preview
// Based in: http://drbl.in/lvCB
// Fork in Github: https://github.com/itbruno/productpreview
// Twitter: @_brunoweb
// Product Preview
// Pallete
$dark-blue: #31353d;
$green: #9bb6aa;
// Body Color
$body-color: #f9f9f9;
// Header
$header-color: $dark-blue;
// Typography
$base-font-family: 'MavenProRegular', arial, tahoma, trebuchet ms, verdana;
$base-font-size: 14px;
// Mixins
@mixin prefix($prop, $val) {
@each $prefix in -webkit-, -moz-, -o-, '' {
#{$prefix}#{$prop}: $val;
}
}
@mixin transparency($opacity){
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
filter: alpha(opacity=($opacity * 100));
-moz-opacity: $opacity;
-khtml-opacity: $opacity;
opacity: $opacity;
}
%clearfix{
*zoom: 1;
&:after {
content: '';
display: table;
clear: both;
}
}
*,
*::after,
*::before {
@include prefix(box-sizing, border-box);
}
// Globals
//----------------------------------------
p {
margin: 0 0 30px;
}
a {
text-decoration: none;
}
// Titles
//----------------------------------------
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
color: $dark-blue;
margin: 0;
}
// Lists
//----------------------------------------
ul {
padding: 0;
list-style: none;
}
// Defaults
//----------------------------------------
abbr {
cursor: help;
}
body {
background: url("../img/main-bg.png");
color: #aaa;
font-size: $base-font-size;
font-family: $base-font-family;
height: 100%;
}
img {
max-width: 100%;
}
figure {
margin: 0;
line-height: 0;
}
main[role="main"] {
max-width: 500px;
margin: 20px auto;
position: relative;
@extend %clearfix;
}
// Product Box
//----------------------------------------
.product {
background: #fff;
max-width: 300px;
position: relative;
z-index: 15;
margin:0 auto;
@include prefix(box-shadow, 0 3px 5px rgba(0,0,0,0.2));
.product-image {
}
.product-description {
position: relative;
z-index: 15;
background: #fff;
@extend %clearfix;
.info {
padding: 15px;
color: #aaa;
font-size: 0.85em;
width: 75%;
float: left;
h1 {
font-size: 20px;
margin: 0 0 5px;
}
p {
margin-bottom: 15px;
line-height: 1.3em;
}
}
.price {
width: 25%;
float: left;
color: $green;
font-size: 3.5em;
position: relative;
margin-top: 25px;
&::before {
content: '$';
position: absolute;
top: 0;
left: -10px;
font-size: 0.35em;
}
}
}
.product-sidebar {
height: 100%;
background: $dark-blue;
width: 50px;
position: absolute;
top: 0;
right: 0;
z-index: -1;
@include prefix(transition, right .3s ease);
@include prefix(border-radius, 0 2px 2px 0);
button {
border: 0;
border-bottom: 1px solid rgba(0,0,0,0.2);
color: #fff;
padding: 0.9em;
font-size: 0.8em;
width: 50px;
height: 50px;
overflow: hidden;
@include prefix(transition, all .4s ease);
&.buy {
background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/buy.png") no-repeat 15px;
}
&.info {
background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/info.png") no-repeat 15px;
}
&.size {
background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/sizes.png") no-repeat 15px;
}
&.colors {
background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/colors.png") no-repeat 15px;
span {
margin-left: 40px;
}
&:hover {
width: 130px;
}
.color {
padding: 10px;
display: inline-block;
vertical-align: middle;
margin: 0;
@include transparency(0.7);
@include prefix(transition, all .3s ease);
&.black { background: #000; border-bottom: 2px solid #555;}
&.white { background: #fff; border-bottom: 2px solid #e5e5e5;}
&.red { background: #EA1535; border-bottom: 2px solid #EF566D;}
&:hover {
@include transparency(1);
@include prefix(transform, scale(1.1));
}
}
}
span {
@include transparency(0);
white-space: nowrap;
margin-left: 30px;
}
&:hover {
width: 130px;
background-color: $green;
position: relative;
background-position: 15px center;
border-color: $green;
}
&:hover span {
@include transparency(1);
}
}
}
&:hover .product-sidebar{
right: -50px;
}
}
// Media Queries
//----------------------------------------
@media screen and (max-width: 480px) {
#content {
margin-top: 60px;
}
.product {
.product-sidebar {
width: 100%;
height: 50px;
bottom: 0px;
left: 0;
top: inherit;
@include prefix(border-radius, 0 0px 2px 2px);
@include prefix(transition, bottom .3s ease);
}
&:hover .product-sidebar {
bottom: -50px;
}
}
}
@media screen and (max-width: 360px) {
.product .product-sidebar {
bottom: -50px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment