Let us know what you think about the new Building Blocks

Hover Product Card

By Rafi

F6
#
How do I use This?

Cards good for an Ecommerce site with a slick hever effect to reveal actions.

HTML
<div class="card card-product-hover">
  <img src="http://www.zurb.com/blog/system/images/690/original/blue_bw_web.jpg?1354921642" alt="sweet foundation shirt" />
  <img src="http://2.bp.blogspot.com/-luqexZwkPcY/VPamfRCxrmI/AAAAAAAAO8s/R6YaU81Zleo/s1600/foundationzurb-theme-DownloadNewThemes.jpg" alt="picture of admin dashboard" />
  <div class="card-product-hover-icons">
    <a href="#"><i class="fa fa-shopping-cart"></i></a>
    <a href="#"><i class="fa fa-star-o"></i></a>
    <a href="#"><i class="fa fa-share-alt"></i></a>
  </div>
  <div class="card-product-hover-details">
    <h3 class="card-product-hover-title">Legacy Foundation Tee</h3>
    <span class="card-product-hover-price">$15.00</span>
  </div>
</div>



$card-product-hover-price-color: $primary-color;
$card-product-hover-font-size: 1.5rem;
$card-product-hover-title-font-size: 1.4rem;

.card-product-hover-title {
  font-size: $card-product-hover-title-font-size;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

.card-product-hover {
  position: relative;
  line-height: 1.2rem;
  transition: all 0.35s ease;
}

.card-product-hover-details {
  @include card-section;
}

.card-product-hover-price {
  margin: 0.5rem 0;
  font-weight: 700;
  color: $card-product-hover-price-color;
  font-size: $card-product-hover-price-color;
}

.card-product-hover-icons {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-product-hover-icons a i {
  display: block;
  font-size: 1.5rem;
  line-height: rem-calc(40);
  width: rem-calc(40);
  background-color: $white;
  text-align: center;
  color: $black;
}

.card-product-hover-icons a i:hover {
  background-color: $dark-gray;
  color: $white;
  cursor: pointer;
}

.card-product-hover-icons a {
  margin: 2px;
  opacity: 0;
  transform: translateY(50%);
  transition: all 0.35s ease;
}

.card-product-hover:hover a,
.card-product-hover.hover a {
  transition: all 0.35s ease;
  opacity: 1;
  transform: translateX(0);
}

.card-product-hover:hover a:nth-child(2),
.card-product-hover.hover a:nth-child(2) {
  transition-delay: 0.1s;
}

.card-product-hover:hover a:nth-child(3),
.card-product-hover.hover a:nth-child(3) {
  transition-delay: 0.2s;
}


.card-product-hover-title {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
}

.card-product-hover {
  position: relative;
  line-height: 1.2rem;
  transition: all 0.35s ease;
}

.card-product-hover-details {
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding: 1rem;
}

.card-product-hover-details > :last-child {
  margin-bottom: 0;
}

.card-product-hover-price {
  margin: 0.5rem 0;
  font-weight: 700;
  color: #1779ba;
  font-size: #1779ba;
}

.card-product-hover-icons {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.card-product-hover-icons a i {
  display: block;
  font-size: 1.5rem;
  line-height: 2.5rem;
  width: 2.5rem;
  background-color: #fefefe;
  text-align: center;
  color: #0a0a0a;
}

.card-product-hover-icons a i:hover {
  background-color: #8a8a8a;
  color: #fefefe;
  cursor: pointer;
}

.card-product-hover-icons a {
  margin: 2px;
  opacity: 0;
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
  transition: all 0.35s ease;
}

.card-product-hover:hover a,
.card-product-hover.hover a {
  transition: all 0.35s ease;
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.card-product-hover:hover a:nth-child(2),
.card-product-hover.hover a:nth-child(2) {
  transition-delay: 0.1s;
}

.card-product-hover:hover a:nth-child(3),
.card-product-hover.hover a:nth-child(3) {
  transition-delay: 0.2s;
}

JS