A simple and clean product preview with hover effect. =)
A Pen by Bruno Rodrigues on CodePen.
<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> |
A simple and clean product preview with hover effect. =)
A Pen by Bruno Rodrigues on CodePen.
// 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; | |
} | |
} | |