Product Card

By Rafi

card hover button control show hide interaction ecommerce

How do I use This?

A product card with a neat hover interaction that reveals content an (add-to-card button) and adds color to the image.

HTML

<div class="card card-product">
  <div class="card-product-img-wrapper">
    <a class="button expanded">Add to Cart</a>
    <a href="#"><img src="https://demandware.edgesuite.net/sits_pod15/dw/image/v2/AAJE_PRD/on/demandware.static/-/Sites-pacsun_storefront_catalog/default/dw2dd1a5fe/product_images/0702497750034NEW_00_165.jpg?sw=215&sh=334&sm=fit"></a>
  </div>
  <div class="card-section">
    <a href="#"><h3 class="card-product-name">Kickin with Kraken Tee</h3></a>
    <h5 class="card-product-price">$19.99</h5>
    <p class="card-product-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere sem enim, accumsan convallis risus semper.</p>
  </div>
</div>

$card-product-hover-transition: all 0.2s ease;

.card-product {
  &:hover {
    .card-product-img-wrapper {

      img {
        filter: grayscale(0);
      }

      .button {
        transform: translateY(-3rem);
      }
    }
  }
}

.card-product-img-wrapper {
  margin-bottom: 1.375rem;
  position: relative;
  overflow: hidden;

  .button {
    transition: $card-product-hover-transition;
    background-color: $secondary-color;
    padding: 1rem 0.5rem;
    bottom: -3rem;
    transform: translateY(3rem);
    position: absolute;
    z-index: 2;
    color: $white;
    margin-bottom: 0;

    &:hover {
      background-color: $primary-color;
    }
  }

  img {
    transition: $card-product-hover-transition;
    filter: grayscale(1);
    width: 100%;
  }

  .card-product-name {
    font-size: 1.375rem;
  }

  .card-product-price {
    font-weight: bold;
  }

  .card-product-description {
    color: $dark-gray;
    font-size: 0.875rem;
    margin-bottom: 0;
  }
}

.card-product:hover .card-product-img-wrapper img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.card-product:hover .card-product-img-wrapper .button {
  -webkit-transform: translateY(-3rem);
      -ms-transform: translateY(-3rem);
          transform: translateY(-3rem);
}

.card-product-img-wrapper {
  margin-bottom: 1.375rem;
  position: relative;
  overflow: hidden;
}

.card-product-img-wrapper .button {
  transition: all 0.2s ease;
  background-color: #767676;
  padding: 1rem 0.5rem;
  bottom: -3rem;
  -webkit-transform: translateY(3rem);
      -ms-transform: translateY(3rem);
          transform: translateY(3rem);
  position: absolute;
  z-index: 2;
  color: #fefefe;
  margin-bottom: 0;
}

.card-product-img-wrapper .button:hover {
  background-color: #1779ba;
}

.card-product-img-wrapper img {
  transition: all 0.2s ease;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  width: 100%;
}

.card-product-img-wrapper .card-product-name {
  font-size: 1.375rem;
}

.card-product-img-wrapper .card-product-price {
  font-weight: bold;
}

.card-product-img-wrapper .card-product-description {
  color: #8a8a8a;
  font-size: 0.875rem;
  margin-bottom: 0;
}

Product Card

By Rafi

Article Card Hover

CSS Grid - Staggered Grid

Table Expand

Product Card

By Rafi

Similar Building Blocks

Article Card Hover

CSS Grid - Staggered Grid

Table Expand