Product Preview(hover)

index.html

<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-hover.markdown

Product Preview(hover)

A simple and clean product preview with hover effect. =)

A Pen by Bruno Rodrigues on CodePen.

License.

script.js

// Product Preview
// Based in: http://drbl.in/lvCB
// Fork in Github: https://github.com/itbruno/productpreview
// Twitter: @_brunoweb

style.scss

// 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;
  }
}