15+ CSS Product Card Examples

This post contains a total of 15+ CSS Product Card Examples with Source Code. All these Product Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Product Card Examples

1. Simple Product Card

Made by Chyno Deluxe. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import 'https://fonts.googleapis.com/css?family=Baloo+Tamma|Raleway|Lato';
body {
  font: 15px/1.25 "Raleway";
  font-weight: 400;
}

h1,
h2,
h3,
button {
  font-family: "Baloo Tamma";
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5dac48;
  position: relative;
}

.product-single {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  min-width: 761px;
  font-size: 16px;
  z-index: 1;
}
.product-single .product-gallery {
  margin-bottom: -4px;
  overflow: hidden;
  float: left;
  width: 380px;
  height: 380px;
  border-right: 1px solid #d0ddcb;
  position: relative;
}
.product-single .product-gallery:hover .slider-arrows {
  opacity: 1;
  height: 30px;
}
.product-single .product-gallery ul,
.product-single .product-gallery li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-single .product-gallery .slider-arrows {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  height: 0;
  font-size: 30px;
  color: #fff;
  padding: 0 10px;
  opacity: 0;
  transition: all 0.2s ease-in;
  z-index: 1;
}
.product-single .product-gallery .slider-arrows i {
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease-in-out;
}
.product-single .product-gallery .slider-arrows i:hover {
  color: #fff;
}
.product-single .product-gallery .slider-arrows i:first-child {
  float: left;
}
.product-single .product-gallery .slider-arrows i:last-child {
  float: right;
}
.product-single .product-gallery #slider-wrap {
  position: relative;
  background: #999;
  overflow: hidden;
  height: 380px;
  width: 380px;
}
.product-single .product-gallery #slider-wrap .slides {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s 0.1s ease-out;
}
.product-single .product-gallery #slider-wrap .slides li {
  float: left;
  width: 380px;
  height: 380px;
  position: relative;
}
.product-single .product-gallery #slider-wrap .slides img {
  max-width: 100%;
}
.product-single .product-gallery .nav-dots {
  display: block;
  margin: auto;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
}
.product-single .product-gallery .nav-dots li {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  display: inline-block;
  background: transparent;
}
.product-single .product-gallery .nav-dots li:before {
  content: "";
  position: absolute;
  background: transparent;
  top: -50%;
  bottom: -50%;
  right: -50%;
  left: -50%;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 7px -2px #000;
}
.product-single .product-gallery .nav-dots li.active {
  background: #d75229;
  transition: all 0.1s 0.1s linear;
}
.product-single .product-gallery .nav-dots li:last-child {
  margin-right: 0;
}
.product-single .product-details {
  padding: 20px;
  width: 380px;
  height: 380px;
  float: left;
  box-sizing: border-box;
  font-size: 14px;
  position: relative;
}
.product-single .product-details .product-title {
  margin-top: 0;
  line-height: 1;
  color: #d75229;
}
.product-single .product-details .product-cost {
  font-size: 20px;
  margin-bottom: 10px;
  color: #5dac48;
}
.product-single .product-details .product-rating .product-reviews {
  font-family: "Lato";
  margin-left: 15px;
  font-size: 12px;
}
.product-single .product-details .product-rating .product-reviews a {
  color: #999;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.05s ease;
}
.product-single .product-details .product-rating .product-reviews a:hover {
  text-decoration: underline;
  color: #d75229;
}
.product-single .product-details .product-rating ul {
  display: inline-block;
}
.product-single .product-details .product-rating ul,
.product-single .product-details .product-rating li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.product-single .product-details .product-rating li {
  color: #fcd000;
}
.product-single .product-details .product-description {
  font-size: 15px;
  line-height: 1.1;
  overflow: hidden;
  max-height: 150px;
  margin: 10px 0;
}
.product-single .product-details .product-cta {
  text-align: center;
  margin: 13px 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
}
.product-single .product-details .product-atc,
.product-single .product-details .product-atw {
  font-size: 16px;
  padding: 10px 22px;
  color: #fff;
  border: none;
  margin: auto;
  border-radius: 20px;
  transition: all 0.1s ease;
  margin-right: 10px;
}
.product-single .product-details .product-atc:last-child,
.product-single .product-details .product-atw:last-child {
  margin: 0;
}
.product-single .product-details .product-atc:focus,
.product-single .product-details .product-atw:focus {
  outline: none;
}
.product-single .product-details .product-atc:hover,
.product-single .product-details .product-atw:hover {
  background: #d75229;
}
.product-single .product-details .product-atc {
  background: #5dac48;
}
.product-single .product-details .product-atw {
  color: #999;
}
.product-single .product-details .product-atw:hover {
  color: #fff;
}
.product-single .product-details .product-info {
  font-size: 11px;
  font-family: "Lato";
  position: absolute;
  bottom: 20px;
  margin-top: 10px;
  color: #999;
}
.product-single .product-details .product-info span {
  display: inline-block;
  margin-right: 10px;
}
</style>
</head>
<body>
  <div class="wrapper">
  <div class="product-single">
    <div class="product-gallery">
      <div class="slider-arrows"><i class="fa fa-fw fa-arrow-circle-o-left" id="prev-slide"></i><i class="fa fa-fw fa-arrow-circle-o-right" id="next-slide"></i></div>
      <div id="slider-wrap">
        <ul class="slides">
          <li><img src="https://storage.googleapis.com/chydlx/codepen/simple-product-card/yoshi-yarn-1.jpg" alt=""/></li>
          <li><img src="https://storage.googleapis.com/chydlx/codepen/simple-product-card/yoshi-yarn-2.jpg" alt=""/></li>
        </ul>
        <ul class="nav-dots">
          <li class="active"></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="product-details">
      <h1 class="product-title">Green Mega Yarn Yoshi</h1>
      <h3 class="product-cost">$39.99</h3>
      <div class="product-rating">
        <ul>
          <li class="fa fa-fw fa-lg fa-star"></li>
          <li class="fa fa-fw fa-lg fa-star"></li>
          <li class="fa fa-fw fa-lg fa-star"></li>
          <li class="fa fa-fw fa-lg fa-star"></li>
          <li class="fa fa-fw fa-lg fa-star-half"></li>
        </ul><span class="product-reviews"><a href="#">10 Reviews</a></span>
      </div>
      <div class="product-description">
        <p>Made from actual yarn, Yoshiβ„’ has never been more adorable! Kind-hearted, naturally protective of others, and perpetually hungry, Yoshiβ„’ is always up for adventure...there are so many mysteries to explore and new things to find!</p>
      </div>
      <div class="product-cta">
        <button class="product-atc">Add to Cart</button>
        <button class="product-atw">Add to Wishlist</button>
      </div>
      <div class="product-info"><span class="product-sku">SKU #12345678</span></div>
    </div>
  </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://use.fontawesome.com/3736911c42.js'></script>
      <script id="rendered-js" >
var $sliderWrap = $('#slider-wrap'),
$slider = $sliderWrap.find('.slides'),
$firstSlide = $slider.find('li:first'),
$lastSlide = $slider.find('li:last'),
$sliderSlides = $sliderWrap.find('.slides > li'),
$navDots = $sliderWrap.find('.nav-dots li'),
$slideArrowLeft = $('#prev-slide'),
$slideArrowRight = $('#next-slide'),
$slideArrows = $slideArrowLeft.add($slideArrowRight),
sliderWidth = $sliderWrap.width(),
// dynamic variables
sliderPos = 0,
s_index = 0,
currentSlide = $sliderSlides[s_index];

function changeSlide() {
  $slider.css('left', sliderPos);

  $navDots.removeClass('active');
  $($navDots[s_index]).addClass('active');
}


function setSliderWidth() {
  /* -----------------------------------------
   * set slider width
   * slider container * number of slides
   * ----------------------------------------- */
  $slider.css('width', sliderWidth * $sliderSlides.length);
}

function nextSlide() {
  /* -----------------------------------------
   * IF: slide index >= total slides
   * THEN:
   *      slide index = 0 
   *      slide pos = 0
   * ELSE:
   *      slide index + 1
   *      move slider position one slide
   * ---------------------------------------- */
  s_index >= $sliderSlides.length - 1 ?
  // s_index = 0,
  // sliderPos = 0,
  false : (

  s_index++,
  sliderPos -= sliderWidth);


  // change slide
  changeSlide();
}

function prevSlide() {
  /* -----------------------------------------
   * IF: slide index <= 0
   * THEN:
   *      slide index = $slides.length
   *      move slider position to last slide
   * ELSE:
   *      slide index - 1
   *      move slider position back one slide
   * ---------------------------------------- */
  s_index <= 0 ?
  // s_index = ($sliderSlides.length - 1),
  // sliderPos = -$sliderWrap.width()
  false : (

  s_index--,
  sliderPos += sliderWidth);


  // change slide
  changeSlide();
}

// set slider width
setSliderWidth();

$slideArrows.on('click', function () {
  // get target id
  var $target_id = $(this).attr('id');

  /* -----------------------------------------
   * Based on target id
   * Execute nextSlide() or prevSlide()
   * --------------------------------------- */
  switch ($target_id) {
    case 'prev-slide':
      prevSlide();
      break;
    case 'next-slide':
      nextSlide();
      break;}

});

$navDots.on('click', function (e) {
  var oldIndex = s_index,
  curIndex = $navDots.index(this);

  /* -----------------------------------------
   * IF: curIndex = oldIndex
   * THEN: return false
   * ELSE IF: oldIndex < curIndex
   * THEN: nextSlide()
   * ELSE: prevSlide()
   * ----------------------------------------- */
  curIndex === oldIndex ? false : oldIndex < curIndex ? nextSlide() : prevSlide();
});
    </script>
</body>
</html>

2. Product card with hover effects

Made by Jorge Aguilar. Product card with cool hover effects. Source


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:[email protected]&family=Roboto:[email protected];400;900&display=swap");
:root {
  --currencyPrefix: "$";
}

body {
  overflow-x: hidden;
  color: #666;
  left: 0;
  padding: 0;
  margin: 0 auto;
  position: relative;
  transition: ease all 0.3s;
}
body * {
  font-family: "Roboto Condensed", sans-serif;
}
body p, body h1, body h2, body h3, body h4, body h5, body h6 {
  margin: 0;
}
body a {
  color: #666;
  text-decoration: none;
}
body ul, body li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.contenedorCards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
}
.contenedorCards .card {
  width: 300px;
  transition: ease all 0.3s;
}
.contenedorCards .card.esFav .wrapper .infoProd .actions .action.aFavs {
  transform: rotateX(360deg) scale(1.2);
}
.contenedorCards .card.esFav .wrapper .infoProd .actions .action.aFavs svg path, .contenedorCards .card.esFav .wrapper .infoProd .actions .action.aFavs svg circle {
  fill: #fff;
  transition-delay: 0.2s;
}
.contenedorCards .card.enCarrito .wrapper .infoProd .actions .action.alCarrito .inCart {
  transform: scale(1);
}
.contenedorCards .card.enCarrito .wrapper .infoProd .actions .action.alCarrito .outCart {
  transform: scale(0);
}
.contenedorCards .card .wrapper {
  margin: 60px 10px 10px 10px;
  padding-top: 300px;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 0 20px 10px rgba(29, 29, 29, 0.1);
  transition: ease all 0.3s;
}
.contenedorCards .card .wrapper:hover {
  transform: translateY(-10px);
}
.contenedorCards .card .wrapper:hover .imgProd {
  height: 350px;
}
.contenedorCards .card .wrapper .colorProd {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #b82d44;
}
.contenedorCards .card .wrapper .imgProd {
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: calc(100% - 300px);
  width: 100%;
  height: 300px;
  transition: ease all 0.3s;
}
.contenedorCards .card .wrapper .infoProd {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 170px;
  padding: 20px;
  box-sizing: border-box;
}
.contenedorCards .card .wrapper .infoProd p {
  width: 100%;
  font-size: 14px;
  text-align: center;
}
.contenedorCards .card .wrapper .infoProd .nombreProd {
  font-family: "Roboto", sans-serif;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.contenedorCards .card .wrapper .infoProd .extraInfo {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.contenedorCards .card .wrapper .infoProd .actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
}
.contenedorCards .card .wrapper .infoProd .actions .preciosGrupo {
  flex-grow: 1;
  position: relative;
}
.contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio {
  font-family: "Roboto", sans-serif;
  color: #1d1d1d;
  font-size: 25px;
  font-weight: 600;
  text-align: left;
}
.contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio.precioOferta {
  position: absolute;
  left: 0;
  top: -15px;
  color: red;
  font-size: 15px;
  text-decoration: line-through;
}
.contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio.precioOferta:before {
  font-size: 12px;
}
.contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio:before {
  content: var(--currencyPrefix);
  font-size: 20px;
}
.contenedorCards .card .wrapper .infoProd .actions .action {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin-left: 15px;
  width: 35px;
  height: 35px;
  position: relative;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.3s;
  cursor: pointer;
  color: #1d1d1d;
}
.contenedorCards .card .wrapper .infoProd .actions .action svg {
  position: absolute;
  transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 0.3s;
}
.contenedorCards .card .wrapper .infoProd .actions .action svg path, .contenedorCards .card .wrapper .infoProd .actions .action svg circle {
  stroke: currentColor;
  fill: transparent;
  transition: ease all 0.3s;
}
.contenedorCards .card .wrapper .infoProd .actions .action.aFavs {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  width: 25px;
  height: 25px;
  color: #fff;
}
.contenedorCards .card .wrapper .infoProd .actions .action.alCarrito svg.inCart {
  transform: scale(0);
}
</style>
</head>
<body>
  <div class="contenedorCards">
  <div class="card">
    <div class="wrapper">
      <div class="colorProd"></div>
      <div class="imgProd" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/batman.png?alt=media&token=bcce964a-7224-4e47-b619-265e93b5311e);"></div>
      <div class="infoProd">
        <p class="nombreProd">ARTFX DC UNIVERSE Batman HUSH Renewal Package</p>
        <p class="extraInfo">Fecha de salida: 31/03/2021</p>
        <div class="actions">
          <div class="preciosGrupo">
            <p class="precio precioOferta">9,999</p>
            <p class="precio precioProd">9,999</p>
          </div>
          <div class="icono action aFavs">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z">
              </path>
            </svg>
          </div>
          <div class="icono action alCarrito">
            <svg class="inCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Quitar del carrito</title>
              <path d="M30 22H12M2 6h6l10 40h32l3.2-9.7"></path>
              <circle cx="20" cy="54" r="4"></circle>
              <circle cx="46" cy="54" r="4"></circle>
              <circle cx="46" cy="22" r="16"></circle>
              <path d="M53 18l-8 9-5-5"></path>
            </svg>
            <svg class="outCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Agregar al carrito</title>
              <path d="M2 6h10l10 40h32l8-24H16"></path>
              <circle cx="23" cy="54" r="4"></circle>
              <circle cx="49" cy="54" r="4"></circle>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="wrapper">
      <div class="colorProd" style="background-color: #1d1d1d;"></div>
      <div class="imgProd" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/blackpanter.png?alt=media&token=de5d3491-e31f-4d91-aa3d-1eb15827d954);"></div>
      <div class="infoProd">
        <p class="nombreProd">Mafex No.091 MAFEX BLACK PANTHER</p>
        <p class="extraInfo">Fecha de salida: 31/03/2021</p>
        <div class="actions">
          <div class="preciosGrupo">
            <p class="precio precioProd">2,799</p>
          </div>
          <div class="bakuretsu_icono action aFavs">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z">
              </path>
            </svg>
          </div>
          <div class="bakuretsu_icono action alCarrito">
            <svg class="inCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Quitar del carrito</title>
              <path d="M30 22H12M2 6h6l10 40h32l3.2-9.7"></path>
              <circle cx="20" cy="54" r="4"></circle>
              <circle cx="46" cy="54" r="4"></circle>
              <circle cx="46" cy="22" r="16"></circle>
              <path d="M53 18l-8 9-5-5"></path>
            </svg>
            <svg class="outCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Agregar al carrito</title>
              <path d="M2 6h10l10 40h32l8-24H16"></path>
              <circle cx="23" cy="54" r="4"></circle>
              <circle cx="49" cy="54" r="4"></circle>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="wrapper">
      <div class="colorProd" style="background-color: #153a82;"></div>
      <div class="imgProd" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/arthur.png?alt=media&token=7e0f09e6-1369-42c5-9c98-af99946fae72);"></div>
      <div class="infoProd">
        <p class="nombreProd">Nendoroid Fate/Grand Order: Saber/Arthur Pendragon Ascension</p>
        <p class="extraInfo">Fecha de salida: 31/03/2021</p>
        <div class="actions">
          <div class="preciosGrupo">
            <p class="precio precioOferta">1,999</p>
            <p class="precio precioProd">9,999</p>
          </div>
          <div class="bakuretsu_icono action aFavs">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z">
              </path>
            </svg>
          </div>
          <div class="bakuretsu_icono action alCarrito">
            <svg class="inCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Quitar del carrito</title>
              <path d="M30 22H12M2 6h6l10 40h32l3.2-9.7"></path>
              <circle cx="20" cy="54" r="4"></circle>
              <circle cx="46" cy="54" r="4"></circle>
              <circle cx="46" cy="22" r="16"></circle>
              <path d="M53 18l-8 9-5-5"></path>
            </svg>
            <svg class="outCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Agregar al carrito</title>
              <path d="M2 6h10l10 40h32l8-24H16"></path>
              <circle cx="23" cy="54" r="4"></circle>
              <circle cx="49" cy="54" r="4"></circle>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="wrapper">
      <div class="colorProd" style="background-color: #3f4a69;"></div>
      <div class="imgProd" style="background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/kashima.png?alt=media&token=ffed0174-7dbe-4b61-bd42-05608a3a3090);"></div>
      <div class="infoProd">
        <p class="nombreProd">figma Kantai Collection -Kan Colle- Kashima</p>
        <p class="extraInfo">Fecha de salida: 31/03/2021</p>
        <div class="actions">
          <div class="preciosGrupo">
            <p class="precio precioOferta">2,799</p>
            <p class="precio precioProd">9,999</p>
          </div>
          <div class="bakuretsu_icono action aFavs">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <path d="M47 5c-6.5 0-12.9 4.2-15 10-2.1-5.8-8.5-10-15-10A15 15 0 0 0 2 20c0 13 11 26 30 39 19-13 30-26 30-39A15 15 0 0 0 47 5z">
              </path>
            </svg>
          </div>
          <div class="bakuretsu_icono action alCarrito">
            <svg class="inCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Quitar del carrito</title>
              <path d="M30 22H12M2 6h6l10 40h32l3.2-9.7"></path>
              <circle cx="20" cy="54" r="4"></circle>
              <circle cx="46" cy="54" r="4"></circle>
              <circle cx="46" cy="22" r="16"></circle>
              <path d="M53 18l-8 9-5-5"></path>
            </svg>
            <svg class="outCart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
              <title>Agregar al carrito</title>
              <path d="M2 6h10l10 40h32l8-24H16"></path>
              <circle cx="23" cy="54" r="4"></circle>
              <circle cx="49" cy="54" r="4"></circle>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
      <script id="rendered-js" >
//Producto a favoritos
$('.card .aFavs').click(function () {
  $(this).parents('.card').toggleClass('esFav');
});
//Producto al carrito
$('.card .alCarrito').click(function () {
  $(this).parents('.card').toggleClass('enCarrito');
});
    </script>
</body>
</html>

3. Product UI Card

Made by Pranjal Saxena. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "source sans pro", lato, "open sans";
}

.container {
  background: linear-gradient(to right, #D44E33, #ED784A, #F68654);
  overflow: auto;
  width: 100%;
  height: 100%;
  position: absolute;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.5);
}
.card .img {
  width: 50%;
  margin-top: 30px;
  float: left;
}
.card .img img {
  max-width: 350px;
  height: auto;
  display: block;
  padding: 30px;
}
.card .content {
  width: 50%;
  float: left;
  background-color: #F7F5F6;
  position: relative;
  padding: 40px;
}
.card h2 {
  font-weight: normal;
  letter-spacing: 3px;
  font-size: 110%;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #F49B6F;
}
.card h1 {
  margin-top: 6px;
  color: #2E2E2E;
  margin-bottom: 15px;
}
.card p {
  color: #A9A7A8;
  margin-bottom: 30px;
}

.buy {
  margin-left: 20px;
}
.buy span.price {
  font-size: 160%;
  color: #949293;
  margin-right: 20px;
}

a.btn {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  background: #F47D3B;
  padding: 10px 40px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  border: 1px solid #F47D3B;
  margin-top: -10px;
}
a.btn:hover {
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
  color: #F47D3B;
  background: transparent;
}
</style>
</head>
<body translate="no" >
  <div class="container">
  <div class="card">
    <div class="img">
      <img src="http://hivemodern.com/public_resources/eero-aarnio-ball-chair-adelta-1.jpg" alt="" />
    </div>
    <div class="content">
      <h2>Global Chair</h2>
      <h1>Eero Aarnio Style Ball Chair</h1>
      <p>Our Reproduction of aarnio ball chair come in selection of colors and meets the archectical specifications of the original.</p>
      
      <div class="buy">
        <span class="price">$890</span>
        <a href="#" class="btn">buy now</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

4. Responsive eCommerce product showcase Card

Made by Andre. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background-color: #f3f3f3;
}

.product-card {
  background-color: #fdfefe;
  max-width: 550px;
  min-height: 400px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 150px;
  box-shadow: 8px 12px 30px #b3b3b3;
  color: #919495;
  font-weight: normal;
  text-align: left;
  font-size: 18px;
  position: relative;
}

.product-details {
  width: 53%;
  float: left;
  height: 100%;
  padding: 30px;
}

.product-details h1 {
  color: #333;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 35px;
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -2px;
}

.product-details p {
  color: #333;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 35px;
  font-size: 0.9em;
  font-weight: 300;
  z-index: 5;
}

.product-details button {
  border: none;
  outline: 0;
  display: inline-block;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  border: 5px solid black;
  font-size: 0.6em;
  letter-spacing: 5px;
  font-weight: 200;
  font-syle: italic;
  box-shadow: 2px 2px 8px #ccc;
  padding: 12px 20px;
  margin-top: 20px;
  font-family: "Open Sans", sans-serif;
}

.product-details button:hover {
  background-color: transparent;
  color: black;
  border: 5px solid black;
}

.product-image {
  position: absolute;
  right: -50px;
  top: -10px;
}

.product-image img {
  max-width: 350px;
}

@media (max-width: 700px) {
  .product-card {
    margin-left: 20px;
    margin-right: 20px;
  }
  .product-details h1 {
  color: #333;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 35px;
  font-size: 1.6em;
  font-weight: 400;
  letter-spacing: -2px;
}
}

@media (max-width: 540px) {
  .product-card {
    overflow: hidden;
    margin-bottom: 50px;
  }

  .product-details {
    width: 60%;
    z-index: 1;
  }

  .product-image {
    width: 100%;
    left: 51%;
    top: 5%;
  }
}

@media (max-width: 440px) {
  .product-details {
    width: 65%;
  }
}

@media (max-width: 365px) {
  .product-details {
    width: 80%;
    position: relative;
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
  }
}
</style>
</head>
  <div class="product-card">
    <div class="product-image">
      <img class="hidden-xs" src="https://s14.postimg.cc/oj9c50fk1/T_Shirt_Mock_Up_Front.png">
       <img class="hidden-lg hidden-md hidden-sm" width="250px" src="https://s14.postimg.cc/oj9c50fk1/T_Shirt_Mock_Up_Front.png">
    </div>
    <div class="product-details">
      <h1>Canada Goose</h1>
      <p>Great product title for a great product and all of the extra things a product might need to make it fill an entire card.</p>
      <button>SHOP NOW</button>
    </div>
  </div>
</body>
</html>

5. Responsive Product Card View With Change Color/Image Functionality

Made by Anuz Pandey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,800&display=swap');

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: #000;
}

.container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 900px;
    height: 600px;
    background: #fff;
    margin: 20px;
}

.container .imgBx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    background: #212121;
    transition: .3s linear;
}

.container .imgBx:before {
    content: 'Nike';
    position: absolute;
    top: 0px;
    left: 24px;
    color: #000;
    opacity: 0.2;
    font-size: 8em;
    font-weight: 800;
}

.container .imgBx img {
    position: relative;
    width: 700px;
    transform: rotate(-30deg);
    left: -50px;
    transition: .9s linear;
}

.container .details {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
}

.container .details h2{
    margin: 0;
    padding: 0;
    font-size: 2.4em;
    line-height: 1em;
    color: #444;
}

.container .details h2 span {
    font-size: 0.4em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
}

.container .details p {
    max-width: 85%;
    margin-left: 15%;
    color: #333;
    font-size: 15px;
    margin-bottom: 36px;
}

.container .details h3 {
    margin: 0;
    padding: 0;
    font-size: 2.5em;
    color: #a2a2a2;
    float: left;
}
.container .details button {
    background: #000;
    color: #fff;
    border: none;
    outline: none;
    padding: 15px 20px;
    margin-top: 5px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 40px;
    float: right;
}

.product-colors span {
    width: 26px;
    height: 26px;
    top: 7px;
    margin-right: 12px;
    left: 10px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.black {
    background: #000;
}

.red {
    background: #D5212E;
}

.orange {
    background: #F18557;
}

.product-colors .active:after{
    content: "";
    width: 36px;
    height: 36px;
    border: 2px solid #000;
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    left: -5px;
    top: -5px;
}

/* responsive */
@media (max-width: 1080px) {
    .container {
        height: auto;
    }
    .container .imgBx {
        padding: 40px;
        box-sizing: border-box;
        width: 100% !important;
        height: auto;
        text-align: center;
        overflow: hidden;
    }
    .container .imgBx img {
        left: initial;
        max-width: 100%;
        transform: rotate(0deg);
    }
    .details {
        width: 100% !important;
        height: auto;
        padding: 20px;
    }
    .container .details p {
        margin-left: 0;
        max-width: 100%;
    }
}

footer {
    position: fixed;
    right: 16px;
    bottom: 12px;
}

footer a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}
</style>
</head>
<body>

    <div class="container">
        <div class="imgBx">
            <img src="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto.png?raw=true" alt="Nike Jordan Proto-Lyte Image">
        </div>
        <div class="details">
            <div class="content">
                <h2>Jordan Proto-Lyte <br>
                    <span>Running Collection</span>
                </h2>
                <p>
                    Featuring soft foam cushioning and lightweight, woven fabric in the upper, the Jordan Proto-Lyte is
                    made for all-day, bouncy comfort.
                    Lightweight Breathability: Lightweight woven fabric with real or synthetic leather provides
                    breathable support.
                    Cushioned Comfort: A full-length foam midsole delivers lightweight, plush cushioning.
                    Secure Traction: Exaggerated herringbone-pattern outsole offers traction on a variety of surfaces.
                </p>
                <p class="product-colors">Available Colors:
                    <span class="black active" data-color-primary="#000" data-color-sec="#212121" data-pic="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto.png?raw=true"></span>
                    <span class="red" data-color-primary="#7E021C" data-color-sec="#bd072d" data-pic="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto_red_black.png?raw=true"></span>
                    <span class="orange" data-color-primary="#CE5B39" data-color-sec="#F18557" data-pic="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto_orange_black.png?raw=true"></span>
                </p>
                <h3>Rs. 12,800</h3>
                <button>Buy Now</button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <a href="https://stylustechnepal.com" target="_blank"><span class="__cf_email__" data-cfemail="5b3a352e21392d39363a35323a386a69681b3c363a323775383436">[email&#160;protected]</span></a>
    </footer>


    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
        // Change The Picture and Associated Element Color when Color Options Are Clicked.
        $(".product-colors span").click(function() {
            $(".product-colors span").removeClass("active");
            $(this).addClass("active");
            $(".active").css("border-color", $(this).attr("data-color-sec"))
            $("body").css("background", $(this).attr("data-color-primary"));
            $(".content h2").css("color", $(this).attr("data-color-sec"));
            $(".content h3").css("color", $(this).attr("data-color-sec"));
            $(".container .imgBx").css("background", $(this).attr("data-color-sec"));
            $(".container .details button").css("background", $(this).attr("data-color-sec"));
            $(".imgBx img").attr('src', $(this).attr("data-pic"));
        });
    </script>
</body>
</html>

6. Simple Product Card UI Design using Html CSS

Made by samuel garcia. Simple Product Card UI Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Istok+Web:[email protected];700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Istok Web", sans-serif;
}

7. Product card with add to cart button

Made by Mark Howard. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url(https://fonts.googleapis.com/css?family=Archivo+Black);
@media only screen and (max-device-width: 480px) {
  .box {
    margin: 20px;
  }

  .product-info {
    margin: 20px;
  }
}
.container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  font-family: "Open Sans", sans-serif;
}

.box {
  width: 700px;
  border-radius: 10px;
  box-shadow: 0 0 30px 0 #999;
}

.product-img {
  float: left;
  margin-top: 20px;
  transition: all 0.5s linear;
}
.product-img:hover {
  transform: scale(1.03);
}

.product-info {
  float: right;
  margin-top: 20px;
  margin-right: 40px;
}

h1 {
  margin-bottom: 50px;
  font-weight: bold;
  font-size: 2.5em;
  color: #333;
  font-family: "Archivo Black", sans-serif;
}

.price {
  margin-top: -40px;
  font-size: 35px;
  font-weight: bolder;
  color: coral;
}

.description {
  margin-top: -20px;
  margin-right: 10px;
  font-weight: bold;
  color: #555;
}

.color {
  margin-top: 25px;
  outline: none;
  border: 2px solid #999;
  padding: 5px;
  border-radius: 5px;
}

.qty {
  margin-top: 25px;
  outline: none;
  border: 2px solid #999;
  padding: 5px;
  border-radius: 5px;
}

button {
  margin-top: 10px;
  background: #333;
  font-size: 1em;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #fff;
  padding: 15px 30px;
  border: 0;
  border-radius: 10px;
  transition: all 0.3s linear;
  margin-left: 50px;
}
button:hover {
  background: #666;
}
</style>
</head>
<body>
  <div class="container">
  <div class="box">
    <div class="product-img">
      <img src="http://images.ifun.de/wp-content/uploads/2015/09/fire-tablet-500.jpg" width="250" alt="" />
    </div>
    <div class="product-info">
      <h1>Fire Tablet</h1>
      <p class="price">$49.99</p>
      <p class="description">Powerful tablet at an incredible price.</p>
      Color:
      <select class="color">
          <option>Black</option>
          <option>Blue</option>
          <option>Tangerine</option>
          <option>Magenta</option>
        </select> Quantity:
      <select class="qty">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      <br /><br />
      <button>ADD TO CART</button>
    </div>
  </div>
</div>
</body>
</html>

8. Cycle product card

Made by SΓΆren KΓΆrbelin. Cycle product card with cool transition effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css'>
  
<style>
/*--------------------
Mixins
---------------------*/
/*--------------------
Body
---------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  font-family: "Open Sans Condensed", sans-serif;
}

body {
  background: linear-gradient(0deg, #e0d09a 50%, #000000 50.1%);
}

.shop-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  background: white;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  z-index: 2;
}
.shop-card figure {
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none !important;
}
.shop-card figure img {
  width: 100%;
}

.title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 30px;
  color: #23211f;
  margin-bottom: 5px;
}

.desc {
  font-size: 17px;
  opacity: 0.8;
  margin-bottom: 10px;
}

.cta {
  padding: 20px 20px 5px;
}
.cta::after {
  content: "";
  display: table;
  clear: both;
}

.price {
  float: left;
  color: #000000;
  font-size: 22px;
  font-weight: 900;
  padding-top: 2px;
  margin-top: 4px;
  transition: color 0.3s ease-in-out;
}

.btn {
  position: relative;
  z-index: 1;
  float: right;
  display: inline-block;
  border: none;
  font-size: 13px;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  line-height: 0.95;
  background: none;
  outline: none;
  border: 1px solid #000000;
  border-radius: 20px;
  color: #000000;
  background-color: #ffffff;
}
.btn .bg {
  width: 101%;
  height: 101%;
  display: block !important;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  background: linear-gradient(180deg, #e0d09a, #000000);
}
.btn:hover {
  color: #eaeaea !important;
  border: 1px solid transparent !important;
}
.btn:hover .bg {
  opacity: 1;
  border-radius: 20px;
}

/*--------------------
Slick Dots
---------------------*/
.slick-dots {
  bottom: -30px;
}
.slick-dots a {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.slick-dots span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.slick-dots circle {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: 39;
  transition: all 0.9s ease-in-out;
  transition: stroke-dashoffset 0.5s;
}
.slick-dots .slick-active circle {
  stroke-dashoffset: 0;
}

/*--------------------
Background
--------------------*/
.bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #e0d09a 50%, #000000 50.1%);
  z-index: 1;
  display: none;
}
</style>
</head>
<body>
  <div class="shop-card">
  <div class="title">
    Specialized Tarmac SL6
  </div>
  <div class="desc">
    The New Tarmac
  </div>
  <div class="slider">
    <figure data-color="#e0d09a, #000000">
      <img src="https://s7d5.scene7.com/is/image/Specialized/210164?$hero$" />
    </figure>  
    <figure data-color="#d1121f, #eaeaea">
      <img src="https://s7d5.scene7.com/is/image/Specialized/210143?$hero$"/>
    </figure>
    <figure data-color="#000000, #d1121f">
      <img src="https://s7d5.scene7.com/is/image/Specialized/210160?$hero$"/>
    </figure>
  </div>    
  <div class="cta">
    <div class="price">€ 9.999</div>
    <button class="btn">Add to Cart<span class="bg"></span></button>
  </div>
</div>
<div class="bg"></div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script>
      <script id="rendered-js" >
function background(c1, c2) {
  return {
    background: '-moz-linear-gradient(0deg, ' + c1 + ' 50%, ' + c2 + ' 50.1%)',
    background: '-o-linear-gradient(0deg, ' + c1 + ', ' + c2 + ' 50.1%)',
    background: '-webkit-linear-gradient(0deg, ' + c1 + ' 50%, ' + c2 + ')',
    background: '-ms-linear-gradient(0deg, ' + c1 + ' 50%, ' + c2 + ' 50.1%)',
    background: 'linear-gradient(0deg, ' + c1 + ' 50%,' + c2 + ' 50.1%)' };

}

function changeBg(c1, c2) {
  $('div.bg').css(background(c1, c2)).fadeIn(700, function () {
    $('body').css(background(c1, c2));
    $('.bg').hide();
  });
  $('span.bg').css({
    background: '-moz-linear-gradient(180deg, ' + c1 + ', ' + c2 + ')',
    background: '-o-linear-gradient(180deg, ' + c1 + ', ' + c2 + ')',
    background: '-webkit-linear-gradient(180deg, ' + c1 + ', ' + c2 + ')',
    background: '-ms-linear-gradient(180deg, ' + c1 + ', ' + c2 + ')',
    background: 'linear-gradient(180deg, ' + c1 + ',' + c2 + ')' });

}

$slider = $('.slider');

$slider.slick({
  arrows: false,
  dots: true,
  infinite: true,
  speed: 1000,
  fade: true,
  focusOnSelect: true,
  customPaging: function (slider, i) {
    var color = $(slider.$slides[i]).data('color').split(',')[1];
    return '<a><svg width="100%" height="100%" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.215" stroke="' + color + '"></circle></svg><span style="background:' + color + '"></span></a>';
  } }).
on('beforeChange', function (event, slick, currentSlide, nextSlide) {
  colors = $('figure', $slider).eq(nextSlide).data('color').split(',');
  color1 = colors[0];
  color2 = colors[1];
  $('.price, .btn').css({
    color: color1 });

  changeBg(color1, color2);
  $('.btn').css({
    borderColor: color2 });

});
    </script>
</body>
</html>

9. Pure CSS Product Card

Made by Rameez Bukhari. Pure CSS Product card with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');
    		@import url('https://fonts.googleapis.com/css?family=Montserrat:300&display=swap');
        		@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap');
  body {
    
  background: #1f1a25;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
}
img{
    position: fixed;
  top: -8%;
  left: 0%;
  border-radius: 50px;
  opacity:0.9;
  transition: 0.5s;

   
}
h1{
  	   transition: transform 2s;
    font-size: 60px;
color: white;
 font-family: 'Big Shoulders Display', cursive;
}
.card:hover > p{
    opacity:1;
       transform: scale(1.5)
    top:80%;
 
}
img:hover .card{
        
  
}
img, #parent {
    cursor: pointer;
    
}
.card:hover > img{
    opacity:1;
       transform: scale(1.4);
             
}
.card header {
    position:absolute;
 
  top: 120%;
  left: 0%;
    padding: 1px;
    border-radius:  25px;
   width: 450px;
         height: 90px;
     transition: all .5s;
    opacity:0;
}
.card:hover > header{
  
    opacity:1;
         width: 450px;
         height: 90px;
             transform: translateY(-120px);
}

 .card {

    	   transition: transform .7s;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 500px;
  margin: auto;
  text-align: center;
  font-family: arial;
  background: white;
    width: 450px;
  height: 450px;
}
.card:hover{

   transform: scale(1.08)
}
  .centeri{ 
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  }
  span{
    
    position: relative;
  }
</style>
</head>
<body>
  <div class="centeri">
<div class="card">
  

  <img src="https://i.pinimg.com/originals/10/f7/41/10f7414c0d4984194f5e1316bd61ca0d.png" class="foto" style="width:100%">
   <header>
     <h1>NIKE AM90id</h1>
  </div>
</div>
</body>
</html>

10. Product Card Details

Made by GizmoStudios. Product cards with options to select. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'>
  
<style>
@charset "UTF-8";
body {
  margin-top: 5rem;
}

.h1 {
  font-weight: bold;
  font-size: 2.4rem;
}

.h2 {
  font-weight: bold;
  font-size: 1.4rem;
}

.h3 {
  display: block;
  font-size: 1.2rem;
}

.container {
  width: 960px !important;
}

.card {
  border-radius: 4px;
  border: solid 2px transparent;
}
.card:hover {
  border: solid 2px #f28500;
}

.card-header-title {
  display: inline-block;
}

.button.fab {
  border-radius: 50%;
  border: none;
  background: #333;
  color: white;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  line-height: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
.button.fab:before {
  content: "+";
}
.button.fab.cancel {
  background: white;
  box-shadow: none;
  border: solid 2px #ccc;
  color: #ccc;
  margin-right: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
.button.fab.cancel:before {
  content: "Γ—";
}
.button.fab:hover {
  color: white;
  background-color: #f28500;
  border-color: #f28500;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

[for] {
  cursor: pointer;
}

.card-content {
  overflow: hidden;
  position: relative;
  height: 270px;
  padding: 0;
}
.card-content .card-content-inner {
  position: absolute;
  width: 100%;
  padding: 0 1rem;
  transition: transform 0.25s ease-out;
}

.card-footer-item {
  border-right: none !important;
}

.card .select, .select select {
  width: 100%;
}

.card-state:checked + .card-content .card-content-inner {
  transform: translate(0, -45%);
}
.card-state:checked ~ .card-footer label.fab.cancel {
  pointer-events: all;
  opacity: 1;
}
.card-state:checked ~ .card-footer label.fab.confirm:before {
  content: "βœ“";
}
</style>
</head>
<body>
  <section class="container">
  <div class="columns">
    <div class="column">
      <h1 class="h1">Bicycles</h1>
      <h3 class="subtitle">Pick a nice one and give us all your money</h3>
    </div>
  </div>
  <div class="columns">
    <div class="column">
      <article class="card">
        <input class="is-hidden card-state" type="checkbox" id="Performance RD9.2"/>
        <div class="card-content">
          <div class="card-content-inner">
            <div class="columns">
              <div class="column">
                <label class="image" for="Performance RD9.2"><img src="//qwic.nl/app/uploads/2018/12/2019_Vrijstaand_sideview_Performance_MA11speed_Diamond_Dutch-orange-540x371.png"/></label>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <label class="h3 has-text-centered" for="Performance RD9.2">Performance RD9.2</label>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>Dutch orange</option>
                    <option>Pearl white</option>
                    <option>Space gray</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>1x</option>
                    <option>2x</option>
                    <option>3x</option>
                    <option>4x</option>
                    <option>5x</option>
                  </select>
                </div>
              </div>
              <div class="column">
                <div class="select">
                  <select>
                    <option>525Wh</option>
                    <option>645Wh</option>
                    <option>785Wh</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                </div>
              </div>
              <div class="column">
                <div class="select">
                  <select>
                    <option>Medium</option>
                    <option>Large</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <h2 class="h2">€4.799</h2>
          </div>
          <div class="card-footer-item"><span>01/03/2019</span></div>
          <div class="card-footer-item">
            <label class="button fab is-pulled-right cancel" for="Performance RD9.2"></label>
            <label class="button fab is-pulled-right confirm" for="Performance RD9.2"></label>
          </div>
        </div>
      </article>
    </div>
    <div class="column">
      <article class="card">
        <input class="is-hidden card-state" type="checkbox" id="Performance MD11"/>
        <div class="card-content">
          <div class="card-content-inner">
            <div class="columns">
              <div class="column">
                <label class="image" for="Performance MD11"><img src="//qwic.nl/app/uploads/2018/12/2019_Vrijstaand_sideview_Performance_MA11speed_Diamond_Dutch-orange-540x371.png"/></label>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <label class="h3 has-text-centered" for="Performance MD11">Performance MD11</label>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>Dutch orange</option>
                    <option>Pearl white</option>
                    <option>Space gray</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>1x</option>
                    <option>2x</option>
                    <option>3x</option>
                    <option>4x</option>
                    <option>5x</option>
                  </select>
                </div>
              </div>
              <div class="column">
                <div class="select">
                  <select>
                    <option>525Wh</option>
                    <option>645Wh</option>
                    <option>785Wh</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                </div>
              </div>
              <div class="column">
                <div class="select">
                  <select>
                    <option>Medium</option>
                    <option>Large</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <h2 class="h2">€4.799</h2>
          </div>
          <div class="card-footer-item"><span>01/03/2019</span></div>
          <div class="card-footer-item">
            <label class="button fab is-pulled-right cancel" for="Performance MD11"></label>
            <label class="button fab is-pulled-right confirm" for="Performance MD11"></label>
          </div>
        </div>
      </article>
    </div>
    <div class="column">
      <article class="card">
        <input class="is-hidden card-state" type="checkbox" id="Performance MA16"/>
        <div class="card-content">
          <div class="card-content-inner">
            <div class="columns">
              <div class="column">
                <label class="image" for="Performance MA16"><img src="//qwic.nl/app/uploads/2018/12/2019_Vrijstaand_sideview_Performance_MA11speed_Diamond_Dutch-orange-540x371.png"/></label>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <label class="h3 has-text-centered" for="Performance MA16">Performance MA16</label>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>Dutch orange</option>
                    <option>Pearl white</option>
                    <option>Space gray</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>1x</option>
                    <option>2x</option>
                    <option>3x</option>
                    <option>4x</option>
                    <option>5x</option>
                  </select>
                </div>
              </div>
              <div class="column">
                <div class="select">
                  <select>
                    <option>525Wh</option>
                    <option>645Wh</option>
                    <option>785Wh</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="column">
                <div class="select">
                  <select>
                    <option>Male</option>
                    <option>Female</option>
                  </select>
                </div>
              </div>
              <div class="column">
                <div class="select">
                  <select>
                    <option>Medium</option>
                    <option>Large</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="card-footer-item">
            <h2 class="h2">€4.799</h2>
          </div>
          <div class="card-footer-item"><span>01/03/2019</span></div>
          <div class="card-footer-item">
            <label class="button fab is-pulled-right cancel" for="Performance MA16"></label>
            <label class="button fab is-pulled-right confirm" for="Performance MA16"></label>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>
</body>
</html>

11. Product Card UI Hover Floating

Made by Katy Wellington. Product Card UI with Hover and Floating effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
  font-family: 'Poppins', sans-serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #131313;
}

.container{
  position: relative;
}

.container .card{
  position: relative;
  width: 320px;
  height: 450px;
  background: #232323;
  border-radius: 20px;
  overflow: hidden;
}

.container .card:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #9bdc28;
  clip-path: circle(150px at 80% 20%);
  transition: 0.5s ease-in-out;
}

.container .card:hover:before{
  clip-path: circle(300px at 80% -20%);
}

.container .card:after{
  content: 'Nike';
  position: absolute;
  top: 30%;
  left: -20%;
  font-size: 12em;
  font-weight: 800;
  font-style: italic;
  color: rgba(255,255,25,0.05)
}

.container .card .imgBx{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 100%;
  height: 220px;
  transition: 0.5s;
}

.container .card:hover .imgBx{
  top: 0%;
  transform: translateY(0%);
    
}

.container .card .imgBx img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  width: 270px;
}

.container .card .contentBx{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
  transition: 1s;
  z-index: 10;
}

.container .card:hover .contentBx{
  height: 210px;
}

.container .card .contentBx h2{
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  margin: 0;
}

.container .card .contentBx .size, .container .card .contentBx .color {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  transition: 0.5s;opacity: 0;
  visibility: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.container .card:hover .contentBx .size{
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}

.container .card:hover .contentBx .color{
  opacity: 1;
  visibility: visible;
  transition-delay: 0.6s;
}

.container .card .contentBx .size h3, .container .card .contentBx .color h3{
  color: #fff;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: 10px;
}

.container .card .contentBx .size span{
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  display: inline-block;
  color: #111;
  background: #fff;
  margin: 0 5px;
  transition: 0.5s;
  color: #111;
  border-radius: 4px;
  cursor: pointer;
}

.container .card .contentBx .size span:hover{
  background: #9bdc28;
}

.container .card .contentBx .color span{
  width: 20px;
  height: 20px;
  background: #ff0;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.container .card .contentBx .color span:nth-child(2){
  background: #9bdc28;
}

.container .card .contentBx .color span:nth-child(3){
  background: #03a9f4;
}

.container .card .contentBx .color span:nth-child(4){
  background: #e91e63;
}

.container .card .contentBx a{
  display: inline-block;
  padding: 10px 20px;
  background: #fff;
  border-radius: 4px;
  margin-top: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #111;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.5s;
  margin-top: 0;
}

.container .card:hover .contentBx a{
  opacity: 1;
  transform: translateY(0px);
  transition-delay: 0.75s;
  
}
</style>
</head>
<body>
  <div class="container">
  <div class="card">
    <div class="imgBx">
      <img src="https://assets.codepen.io/4164355/shoes.png">
    </div>
    <div class="contentBx">
      <h2>Nike Shoes</h2>
      <div class="size">
        <h3>Size :</h3>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
      </div>
      <div class="color">
        <h3>Color :</h3>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <a href="#">Buy Now</a>
    </div>
  </div>
</div>
</body>
</html>

12. NerdyVerse Featured Product Card

Made by Raj K Singh. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.red-deep_orange.min.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  
  <link rel='stylesheet' href='https://code.getmdl.io/1.1.3/material.red-deep_orange.min.css'>
  
<style>
/* Generals resets and unimportant stuff */
* {
  margin: 0px;
  padding: 0px;
}
body {
  background: #f7f7f7;
  font-family: "Open Sans", sans-serif;
}

h1 {
  color: #cc0000;
  text-transform: uppercase;
  position: fixed;
  bottom: 0;
}

#view-code {
  color: #48cfad;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  position: absolute;
  top: 640px;
  left: 50%;
  margin-left: -35px;
}
#view-code:hover {
  color: #cc0000;
}

/* --- Product Card ---- */
#make-3D-space {
  position: relative;
  perspective: 800px;
  width: 340px;
  height: 500px;
  transform-style: preserve-3d;
  transition: transform 5s;
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -167px;
}
#product-front,
#product-back {
  width: 335px;
  height: 500px;
  background: #fff;
  position: absolute;
  left: -5px;
  top: -5px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#product-back {
  display: none;
  transform: rotateY(180deg);
}
#product-card.animate #product-back,
#product-card.animate #product-front {
  top: 0px;
  left: 0px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#product-card {
  width: 325px;
  height: 490px;
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  -webkit-transition: 100ms ease-out;
  -moz-transition: 100ms ease-out;
  -o-transition: 100ms ease-out;
  transition: 100ms ease-out;
}
div#product-card.flip-10 {
  -webkit-transform: rotateY(-10deg);
  -moz-transform: rotateY(-10deg);
  -o-transform: rotateY(-10deg);
  transform: rotateY(-10deg);
  transition: 50ms ease-out;
}
div#product-card.flip90 {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  transition: 100ms ease-in;
}
div#product-card.flip190 {
  -webkit-transform: rotateY(190deg);
  -moz-transform: rotateY(190deg);
  -o-transform: rotateY(190deg);
  transform: rotateY(190deg);
  transition: 100ms ease-out;
}
div#product-card.flip180 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transition: 150ms ease-out;
}
#product-card.animate {
  top: 5px;
  left: 5px;
  width: 335px;
  height: 500px;
  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.3);
  -webkit-transition: 100ms ease-out;
  -moz-transition: 100ms ease-out;
  -o-transition: 100ms ease-out;
  transition: 100ms ease-out;
}
.stats-container {
  background: #fff;
  position: absolute;
  top: 386px;
  left: 0;
  width: 265px;
  height: 300px;
  padding: 27px 35px 35px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
#product-card.animate .stats-container {
  top: 272px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
.stats-container .product_name {
  font-size: 22px;
  color: #393c45;
}
.stats-container p {
  font-size: 16px;
  color: #bcbcba;
  padding: 2px 0 20px 0;
}
.stats-container .product_price {
  float: right;
  color: #cc0000;
  font-size: 22px;
  font-weight: 300;
}
.image_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cc0000;
  opacity: 0;
}
#product-card.animate .image_overlay {
  opacity: 0.7;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
.product-options {
  padding: 2px 0 0;
}
.product-options strong {
  font-weight: 700;
  color: #cc0000;
  font-size: 14px;
}
.product-options span {
  color: #;
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}
#view_details {
  position: absolute;
  top: 112px;
  left: 50%;
  margin-left: -85px;
  border: 2px solid #fff;
  color: #fff;
  font-size: 19px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
  width: 172px;
  opacity: 0;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
#view_details:hover {
  background: #fff;
  color: #cc0000;
  font-weight: 300;
  cursor: pointer;
}
#product-card.animate #view_details {
  opacity: 1;
  width: 152px;
  font-size: 15px;
  margin-left: -75px;
  top: 115px;
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}
div.colors div {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  float: left;
}
div.colors div span {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 50%;
}
div.colors div span:hover {
  width: 17px;
  height: 17px;
  margin: -1px 0 0 -1px;
}
div.c-blue span {
  background: #6e8cd5;
}
div.c-red span {
  background: #f56060;
}
div.c-green span {
  background: #44c28d;
}
div.c-white span {
  background: #fff;
  width: 14px;
  height: 14px;
  border: 1px solid #e8e9eb;
}
div.shadow {
  width: 335px;
  height: 520px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
  background: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.2)
  );
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
  background: -moz-linear-gradient(
    right,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.2)
  );
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
}
#product-front img {
  width: 100%;
  height: 100%;
  padding-top: 25px;
  object-fit: contain;
  background: black;
  object-position: top  
}
#product-back div.shadow {
  z-index: 10;
  opacity: 1;
  background: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.1)
  );
  background: -o-linear-gradient(right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  background: -moz-linear-gradient(
    right,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.1)
  );
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
}
#flip-back {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
#cx,
#cy {
  background: #d2d5dc;
  position: absolute;
  width: 0px;
  top: 15px;
  right: 15px;
  height: 3px;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
#flip-back:hover #cx,
#flip-back:hover #cy {
  background: #979ca7;
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
#cx.s1,
#cy.s1 {
  right: 0;
  width: 30px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#cy.s2 {
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#cy.s3 {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#cx.s1 {
  right: 0;
  width: 30px;
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#cx.s2 {
  -ms-transform: rotate(140deg);
  -webkit-transform: rotate(140deg);
  transform: rotate(140deg);
  -webkit-transition: all 100ms ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#cx.s3 {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: all 100ease-out;
  -moz-transition: all 100ms ease-out;
  -ms-transition: all 100ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
}
#carousel {
  width: 335px;
  height: 500px;
  overflow: hidden;
  position: relative;
}
#carousel ul {
  position: absolute;
  top: 0;
  left: 0;
}
#carousel li {
  width: 335px;
  height: 500px;
  float: left;
  overflow: hidden;
}

#carousel li.product-image1 {
  background-image: url("https://i.imgur.com/azxHelS.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%, 50%;
  background-color: black;
}

#carousel li.product-image2 {
  background-image: url("https://i.imgur.com/yQiYn1M.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%, 50%;
  background-color: rgb(238, 238, 238);
}

#carousel li.product-image3 {
  background-image: url("https://i.imgur.com/znpk1JE.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%, 50%;
  background-color: rgb(238, 238, 238);
}

.arrows-perspective {
  width: 335px;
  height: 55px;
  position: absolute;
  top: 218px;
  transform-style: preserve-3d;
  transition: transform 5s;
  perspective: 335px;
}
.carouselPrev,
.carouselNext {
  width: 50px;
  height: 55px;
  background: #ccc;
  position: absolute;
  top: 0;
  transition: all 200ms ease-out;
  opacity: 0.9;
  cursor: pointer;
}
.carouselNext {
  top: 0;
  right: -26px;
  -webkit-transform: rotateY(-117deg);
  -moz-transform: rotateY(-117deg);
  -o-transform: rotateY(-117deg);
  transform: rotateY(-117deg);
  transition: all 200ms ease-out;
}
.carouselNext.visible {
  right: 0;
  opacity: 0.8;
  background: #cc0000;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transition: all 200ms ease-out;
}
.carouselPrev {
  left: -26px;
  top: 0;
  -webkit-transform: rotateY(117deg);
  -moz-transform: rotateY(117deg);
  -o-transform: rotateY(117deg);
  transform: rotateY(117deg);
  transition: all 200ms ease-out;
}
.carouselPrev.visible {
  left: 0;
  opacity: 0.8;
  background: #cc0000;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  transition: all 200ms ease-out;
}
#carousel .x,
#carousel .y {
  height: 2px;
  width: 15px;
  background: #fff;
  position: absolute;
  top: 31px;
  left: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#carousel .x {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 21px;
}
#carousel .carouselNext .x {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#carousel .carouselNext .y {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.button {
  width: 100%;
  position: fixed;
  bottom: 1em;
  text-align: center;
}

.button .mdl-button {
  background-color: #cc0000;
  color: #fff;
}

.button .mdl-button:hover {
  background-color: #fff;
  color: #cc0000;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300, 400,600,700' rel='stylesheet' type='text/css'>

<div id="make-3D-space">
  <div id="product-card">
    <div id="product-front">
      <div class="shadow"></div>
<img src="https://i.imgur.com/azxHelS.jpg" alt="Empire Propaganda"/>
      <div class="image_overlay"></div>
      <div id="view_details">View details</div>
      <div class="stats">
        <div class="stats-container">
          <span class="product_price">$19.97</span>
          <span class="product_name">Empire Propaganda</span>
          <p>Men's Graphic T-Shirt</p>
          <div class="product-options">
            <strong>SIZES</strong>
            <span>XS, S, M, L, XL, XXL, 3XL</span>
            <strong>COLORS</strong>
            <span>
                        Black </span>
          </div>
        </div>
      </div>
    </div>
    <div id="product-back">
      <div class="shadow"></div>
      <div id="carousel">
        <ul>
          <li class="product-image1"></li>
          <li class="product-image2"></li>
          <li class="product-image3"></li>
        </ul>
        <div class="arrows-perspective">
          <div class="carouselPrev">
            <div class="y"></div>
            <div class="x"></div>
          </div>
          <div class="carouselNext">
            <div class="y"></div>
            <div class="x"></div>
          </div>
        </div>
      </div>
      <div class="button">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" onclick="window.open('https://www.designbyhumans.com/shop/t-shirt/men/empire-propaganda/152012/', '_blank')">
              See More
            </button>
      </div>
      <div id="flip-back">
        <div id="cy"></div>
        <div id="cx"></div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script id="rendered-js" >
$(document).ready(function () {

  // Lift card and show stats on Mouseover
  $('#product-card').hover(function () {
    $(this).addClass('animate');
    $('div.carouselNext, div.carouselPrev').addClass('visible');
  }, function () {
    $(this).removeClass('animate');
    $('div.carouselNext, div.carouselPrev').removeClass('visible');
  });

  // Flip card to the back side
  $('#view_details').click(function () {
    $('div.carouselNext, div.carouselPrev').removeClass('visible');
    $('#product-card').addClass('flip-10');
    setTimeout(function () {
      $('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo(80, 1, function () {
        $('#product-front, #product-front div.shadow').hide();
      });
    }, 50);

    setTimeout(function () {
      $('#product-card').removeClass('flip90').addClass('flip190');
      $('#product-back').show().find('div.shadow').show().fadeTo(90, 0);
      setTimeout(function () {
        $('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
        setTimeout(function () {
          $('#product-card').css('transition', '100ms ease-out');
          $('#cx, #cy').addClass('s1');
          setTimeout(function () {$('#cx, #cy').addClass('s2');}, 100);
          setTimeout(function () {$('#cx, #cy').addClass('s3');}, 200);
          $('div.carouselNext, div.carouselPrev').addClass('visible');
        }, 100);
      }, 100);
    }, 150);
  });

  // Flip card back to the front side
  $('#flip-back').click(function () {

    $('#product-card').removeClass('flip180').addClass('flip190');
    setTimeout(function () {
      $('#product-card').removeClass('flip190').addClass('flip90');

      $('#product-back div.shadow').css('opacity', 0).fadeTo(100, 1, function () {
        $('#product-back, #product-back div.shadow').hide();
        $('#product-front, #product-front div.shadow').show();
      });
    }, 50);

    setTimeout(function () {
      $('#product-card').removeClass('flip90').addClass('flip-10');
      $('#product-front div.shadow').show().fadeTo(100, 0);
      setTimeout(function () {
        $('#product-front div.shadow').hide();
        $('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
        $('#cx, #cy').removeClass('s1 s2 s3');
      }, 100);
    }, 150);

  });


  /* ----  Image Gallery Carousel   ---- */

  var carousel = $('#carousel ul');
  var carouselSlideWidth = 335;
  var carouselWidth = 0;
  var isAnimating = false;

  // building the width of the casousel
  $('#carousel li').each(function () {
    carouselWidth += carouselSlideWidth;
  });
  $(carousel).css('width', carouselWidth);

  // Load Next Image
  $('div.carouselNext').on('click', function () {
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft + carouselSlideWidth;
    if (newLeft == carouselWidth || isAnimating === true) {return;}
    $('#carousel ul').css({ 'left': "-" + newLeft + "px",
      "transition": "300ms ease-out" });

    isAnimating = true;
    setTimeout(function () {isAnimating = false;}, 300);
  });

  // Load Previous Image
  $('div.carouselPrev').on('click', function () {
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft - carouselSlideWidth;
    if (newLeft < 0 || isAnimating === true) {return;}
    $('#carousel ul').css({ 'left': "-" + newLeft + "px",
      "transition": "300ms ease-out" });

    isAnimating = true;
    setTimeout(function () {isAnimating = false;}, 300);
  });
});
    </script>
</body>
</html>

13. SlideUP & Flip Product Card

Made by Utkarsh Soni. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title> 
  
<style>
/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
	background: #eaebec;
	font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#48cfad; 
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:640px; left:50%;margin-left:-35px;
}
#view-code:hover{color:#34c29e;}

/* --- Product Card ---- */
#make-3D-space{
    position: relative;
    perspective: 800px;
    width:340px;
    height:500px;
    transform-style: preserve-3d;
    transition: transform 5s;
    position:absolute;    
    top:80px;
    left:50%;	
    margin-left:-167px;
}
#product-front, #product-back{
	width:335px;
	height:500px;
	background:#fff;
	position:absolute;
	left:-5px;
	top:-5px;
	-webkit-transition: all 100ms ease-out; 
       -moz-transition: all 100ms ease-out; 
         -o-transition: all 100ms ease-out; 
            transition: all 100ms ease-out; 
}
#product-back{
	display:none;
	transform: rotateY( 180deg );
}
#product-card.animate #product-back, #product-card.animate #product-front{
	top:0px;
	left:0px;
	-webkit-transition: all 100ms ease-out; 
       -moz-transition: all 100ms ease-out; 
         -o-transition: all 100ms ease-out; 
            transition: all 100ms ease-out; 
}
#product-card{
	width:325px;
	height:490px;
	position:absolute;    
	top:10px;
	left:10px;	
  margin-bottom: 50px;
	overflow:hidden;
    transform-style: preserve-3d;
	-webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out;
}
div#product-card.flip-10{
	 -webkit-transform: rotateY( -10deg );
         -moz-transform: rotateY( -10deg );
           -o-transform: rotateY( -10deg );
              transform: rotateY( -10deg );
			   transition:  50ms ease-out; 			
}
div#product-card.flip90{
	 -webkit-transform: rotateY( 90deg );
         -moz-transform: rotateY( 90deg );
           -o-transform: rotateY( 90deg );
              transform: rotateY( 90deg );
			   transition:  100ms ease-in; 			
}
div#product-card.flip190{
	 -webkit-transform: rotateY( 190deg );
         -moz-transform: rotateY( 190deg );
           -o-transform: rotateY( 190deg );
              transform: rotateY( 190deg );
			   transition:  100ms ease-out; 			
}
div#product-card.flip180{
	 -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
			   transition:  150ms ease-out; 			
}
#product-card.animate{
	top:5px;
	left:5px;
	width:335px;
	height:550px;
	box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
	-webkit-transition:  100ms ease-out; 
       -moz-transition:  100ms ease-out; 
         -o-transition:  100ms ease-out; 
            transition:  100ms ease-out; 
}
.stats-container{
	background:#fff;	
	position:absolute;
	top:386px;
	left:0;
	width:265px;
	height:300px;
	padding:27px 35px 35px;	
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out;
}
#product-card.animate .stats-container{
	top:272px;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.stats-container .product_name{
	font-size:22px;
	color:#393c45;	
}
.stats-container p{
	font-size:16px;
	color:#b1b1b3;	
	padding:2px 0 20px 0;
}
.stats-container .product_price{
	float:right;
	color:#48cfad;
	font-size:22px;
	font-weight:600;
}

.image_overlay{
	position:absolute;
	top:0;
	left:0; 
	width:100%;
	height:100%;
	background:#48daa1;
	opacity:0;	
}
#product-card.animate .image_overlay{
	opacity:0.7;	
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}
.product-options{
	padding:2px 0 0;
}
.product-options strong{
	font-weight:700;
	color:#393c45;
	font-size:14px;
}
.product-options span{	
	color:#969699;
	font-size:14px;
	display:block;
	margin-bottom:8px;
}
#view_details{	
	position:absolute;
	top:120px;
	left:50%;
	margin-left:-85px;	
	border:2px solid #fff;
	color:#fff;
	font-size:19px;
	text-align:center;
	text-transform:uppercase;
	font-weight:700;
	padding:10px 0;
	width:172px;	
	opacity:0;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}

#view_details:hover{	
	background:#fff;
	color:#48cfad;
	cursor:pointer;

}
#product-card.animate #view_details{
	opacity:1;
	width:152px;
	font-size:15px;
	margin-left:-75px;
	top:140px;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 		
}
#add_to_cart{	
	position:absolute;
	top:100px;
	left:50%;
	width:172px;
	font-size:19px;
	margin-left:-85px;
	border:2px solid #fff;
	color:#fff;	
	text-align:center;
	text-transform:uppercase;
	font-weight:700;
	padding:10px 0;	
	opacity:0;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 
}

#add_to_cart:hover{	
	background:#fff;
	color:#48cfad;
	cursor:pointer;

}
#product-card.animate #add_to_cart{
	opacity:1;	
  width:152px;
	font-size:15px;
	margin-left:-75px;
	top:90px;
	-webkit-transition: all 200ms ease-out; 
       -moz-transition: all 200ms ease-out; 
         -o-transition: all 200ms ease-out; 
            transition: all 200ms ease-out; 		
}
div.sizes div{
	margin-top:3px;
	width:15px; 
	height:15px; 	
	margin-right:20px;
	float:left;
}
div.sizes div span{
	width:28px; 
	height:28px; 
	display:block;
	border-radius:50%;
	font-size: 75%;
	text-align: center;
	color: black;
	padding-top: 8px;
}
div.sizes div span:hover{
	width:30px;
	height:30px;
	margin:-1px 0 0 -1px;
}
div.s-blue span{background:#fff;width:14px;
	height:14px; 
	border:1px solid #e8e9eb;}
div.s-red span{background:#fff;	width:14px;
	height:14px; 
	border:1px solid #e8e9eb; }
div.s-green span{background:#fff;	width:14px;
	height:14px; 
	border:1px solid #e8e9eb;}
div.s-white span{
	background:#fff;
	width:14px;
	height:14px; 
	border:1px solid #e8e9eb;
}
div.colors div{
	margin-top:3px;
	width:15px; 
	height:15px; 	
	margin-right:5px;
	float:left;
}
div.colors div span{
	width:15px; 
	height:15px; 
	display:block;
	border-radius:50%;
}
div.colors div span:hover{
	width:17px;
	height:17px;
	margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
	background:#fff;
	width:14px;
	height:14px; 
	border:1px solid #e8e9eb;
}
.pricing {
 
  width: 100%;
  height: 65px;
  
  background-color: #ffffff;
 
  font-size: 80%;
  color: #535353;
  display: -webkit-box;
  display:    -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display:         flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  z-index: 3;
}
.inputNumber {
  width: 90px;
  height: 25px;
  margin-left: 30px;
  border-radius: 12px;
  border: 1px solid #e4e4e4;
  line-height: 22px;
  font-size: 120%;
  font-weight: bold;
  overflow: hidden;
}

.minus {
  float: left;
  text-align: center;
  width: 30px;
  height: 100%;
  cursor: pointer;
}

.number {
  float: left;
  text-align: center;
  width: 30px;
  height: 100%;
  border-right: 1px solid #e4e4e4;
  border-left: 1px solid #e4e4e4;
}

.plus {
  float: left;
  text-align: center;
  width: 28px;
  height: 100%;
  cursor: pointer;
}

.minus:hover,
.plus:hover {
  background-color: #e4e4e4;
}

div.shadow{
	width:335px;height:520px;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	z-index:3;
	display:none;
	background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
    background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2)); 
    background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2)); 
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2)); 
}
#product-back div.shadow{
	z-index:10;
	opacity:1;
	background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
    background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); 
    background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1)); 
    background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1)); 
}
#flip-back{
	position:absolute;
	top:20px;
	right:20px;
	width:30px;
	height:30px;
	cursor:pointer;
}
#cx, #cy{
	background:#d2d5dc;
	position:absolute;
	width:0px;
	top:15px;
	right:15px;
	height:3px;
	-webkit-transition: all 250ms ease-in-out;
	   -moz-transition: all 250ms ease-in-out;
		-ms-transition: all 250ms ease-in-out;
		 -o-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
#flip-back:hover #cx, #flip-back:hover #cy{
	background:#979ca7;
	-webkit-transition: all 250ms ease-in-out;
	   -moz-transition: all 250ms ease-in-out;
		-ms-transition: all 250ms ease-in-out;
		 -o-transition: all 250ms ease-in-out;
			transition: all 250ms ease-in-out;
}
#cx.s1, #cy.s1{	
	right:0;	
	width:30px;	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#cy.s2{	
	-ms-transform: rotate(50deg); 
	-webkit-transform: rotate(50deg); 
	transform: rotate(50deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#cy.s3{	
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#cx.s1{	
	right:0;	
	width:30px;	
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#cx.s2{	
	-ms-transform: rotate(140deg); 
	-webkit-transform: rotate(140deg); 
	transform: rotate(140deg);		 
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#cx.s3{	
	-ms-transform: rotate(135deg); 
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		 
	-webkit-transition: all 100ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
#carousel{
	width:335px;
	height:500px;
	overflow:hidden;
	position:relative;

}
#carousel ul{
	position:absolute;
	top:0;
	left:0;
}
#carousel li{
	width:335px;
	height:500px;
	float:left;
	overflow:hidden;	
}
.arrows-perspective{
	width:335px;
	height:55px;
	position: absolute;
	top: 218px;
	transform-style: preserve-3d;
    transition: transform 5s;
	perspective: 335px;
}
.carouselPrev, .carouselNext{
	width: 50px;
	height: 55px;
	background: #ccc;
	position: absolute;	
	top:0;
	transition: all 200ms ease-out; 
	opacity:0.9;
	cursor:pointer;
}
.carouselNext{
	top:0;
	right: -26px;
	-webkit-transform: rotateY( -117deg );
         -moz-transform: rotateY( -117deg );
           -o-transform: rotateY( -117deg );
              transform: rotateY( -117deg );
			  transition: all 200ms ease-out; 			

}
.carouselNext.visible{
		right:0;
		opacity:0.8;
		background: #efefef;
		-webkit-transform: rotateY( 0deg );
         -moz-transform: rotateY( 0deg );
           -o-transform: rotateY( 0deg );
              transform: rotateY( 0deg );
			  transition: all 200ms ease-out; 
}
.carouselPrev{		
	left:-26px;
	top:0;
	-webkit-transform: rotateY( 117deg );
         -moz-transform: rotateY( 117deg );
           -o-transform: rotateY( 117deg );
              transform: rotateY( 117deg );
			  transition: all 200ms ease-out; 

}
.carouselPrev.visible{
		left:0;
		opacity:0.8;
		background: #eee;
		-webkit-transform: rotateY( 0deg );
         -moz-transform: rotateY( 0deg );
           -o-transform: rotateY( 0deg );
              transform: rotateY( 0deg );
			  transition: all 200ms ease-out; 
}
#carousel .x, #carousel .y{
	height:2px;
	width:15px;
	background:#48cfad;
	position:absolute;
	top:31px;
	left:17px;
	-ms-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);	
}
#carousel .x{
	-ms-transform: rotate(135deg); 	
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		
	top:21px;
}
#carousel .carouselNext .x{
	-ms-transform: rotate(45deg); 	
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg);		
}
#carousel .carouselNext .y{
	-ms-transform: rotate(135deg); 	
	-webkit-transform: rotate(135deg); 
	transform: rotate(135deg);		
}
</style>
</head>
<body>
<div id="make-3D-space">
    <div id="product-card">
        <div id="product-front">
            <div class="shadow"></div>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
            <div class="image_overlay"></div>
          <div id="add_to_cart">Add to cart</div>
            <div id="view_details">View details</div>
            <div class="stats">         
                <div class="stats-container">
                    <span class="product_price" id="price">$39</span>
                    <span class="product_name">Adidas Originals</span>    
                    <p>Men's running shirt</p>                                            
                    
                    <div class="product-options">
                    <strong>SIZES</strong>
                    <div class="sizes">
                        <div class="s-blue"><span>S</span></div>
                        <div class="s-red"><span>M</span></div>
                        <div class="s-white"><span>L</span></div>
                        <div class="s-green"><span>XL</span></div>
                    </div>
                    <br><br>
                    <strong>COLORS</strong>
                    <div class="colors">
                        <div class="c-blue"><span></span></div>
                        <div class="c-red"><span></span></div>
                        <div class="c-white"><span></span></div>
                        <div class="c-green"><span></span></div>
                    </div>
                      <div class="pricing">
     <strong>Quantity:</strong>
      <div class="inputNumber">
        <div class="minus">-</div>
        <div class="number">1</div>
        <div class="plus">+</div>
      </div>
    </div>
                </div>                       
                </div>                         
            </div>
        </div>
        <div id="product-back">
            <div class="shadow"></div>
            <div id="carousel">
                <ul>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
                    <li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
                </ul>
                <div class="arrows-perspective">
                    <div class="carouselPrev">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                    <div class="carouselNext">
                        <div class="y"></div>
                        <div class="x"></div>
                    </div>
                </div>
            </div>
            <div id="flip-back">
                <div id="cy"></div>
                <div id="cx"></div>
            </div>
        </div>    
    </div>  
</div>  

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>
      <script>
$(document).ready(function () {

  // Lift card and show stats on Mouseover
  $('#product-card').hover(function () {
    $(this).addClass('animate');
    $('div.carouselNext, div.carouselPrev').addClass('visible');
  }, function () {
    $(this).removeClass('animate');
    $('div.carouselNext, div.carouselPrev').removeClass('visible');
  });

  // Flip card to the back side
  $('#view_details').click(function () {
    $('div.carouselNext, div.carouselPrev').removeClass('visible');
    $('#product-card').addClass('flip-10');
    setTimeout(function () {
      $('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo(80, 1, function () {
        $('#product-front, #product-front div.shadow').hide();
      });
    }, 50);

    setTimeout(function () {
      $('#product-card').removeClass('flip90').addClass('flip190');
      $('#product-back').show().find('div.shadow').show().fadeTo(90, 0);
      setTimeout(function () {
        $('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
        setTimeout(function () {
          $('#product-card').css('transition', '100ms ease-out');
          $('#cx, #cy').addClass('s1');
          setTimeout(function () {$('#cx, #cy').addClass('s2');}, 100);
          setTimeout(function () {$('#cx, #cy').addClass('s3');}, 200);
          $('div.carouselNext, div.carouselPrev').addClass('visible');
        }, 100);
      }, 100);
    }, 150);
  });

  // Flip card back to the front side
  $('#flip-back').click(function () {

    $('#product-card').removeClass('flip180').addClass('flip190');
    setTimeout(function () {
      $('#product-card').removeClass('flip190').addClass('flip90');

      $('#product-back div.shadow').css('opacity', 0).fadeTo(100, 1, function () {
        $('#product-back, #product-back div.shadow').hide();
        $('#product-front, #product-front div.shadow').show();
      });
    }, 50);

    setTimeout(function () {
      $('#product-card').removeClass('flip90').addClass('flip-10');
      $('#product-front div.shadow').show().fadeTo(100, 0);
      setTimeout(function () {
        $('#product-front div.shadow').hide();
        $('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
        $('#cx, #cy').removeClass('s1 s2 s3');
      }, 100);
    }, 150);

  });


  /* ----  Image Gallery Carousel   ---- */

  var carousel = $('#carousel ul');
  var carouselSlideWidth = 335;
  var carouselWidth = 0;
  var isAnimating = false;

  // building the width of the casousel
  $('#carousel li').each(function () {
    carouselWidth += carouselSlideWidth;
  });
  $(carousel).css('width', carouselWidth);

  // Load Next Image
  $('div.carouselNext').on('click', function () {
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft + carouselSlideWidth;
    if (newLeft == carouselWidth || isAnimating === true) {return;}
    $('#carousel ul').css({ 'left': "-" + newLeft + "px",
      "transition": "300ms ease-out" });

    isAnimating = true;
    setTimeout(function () {isAnimating = false;}, 300);
  });

  // Load Previous Image
  $('div.carouselPrev').on('click', function () {
    var currentLeft = Math.abs(parseInt($(carousel).css("left")));
    var newLeft = currentLeft - carouselSlideWidth;
    if (newLeft < 0 || isAnimating === true) {return;}
    $('#carousel ul').css({ 'left': "-" + newLeft + "px",
      "transition": "300ms ease-out" });

    isAnimating = true;
    setTimeout(function () {isAnimating = false;}, 300);
  });
});

//QUANTITY
$('.minus').click(function () {
  var quantity = parseInt($('.number').html());
  quantity -= 1;
  if (quantity < 1) {
    quantity = 1;
  }
  updateQuantity(quantity);
  updatePrice(quantity);
});

$('.plus').click(function () {
  var quantity = parseInt($('.number').html());
  quantity += 1;
  updateQuantity(quantity);
  updatePrice(quantity);
});

function updatePrice(quantity) {
  var price = 39;
  price = price * quantity;
  $('#price').html("$" + price);
}

function updateQuantity(quantity) {
  $('.number').html(quantity);
}
    </script>
</body>
</html>

14. Product UI Design

Made by AboutZ3. Car Product Card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900|Nunito);
/* Mixins */
body, html {
  height: 100%;
}

body {
  background: linear-gradient(0, #141414 50.1%, #0A0A0A 50%);
  font-family: "Nunito", sans-serif;
}

/*=== Product Card ===*/
.product-card {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 500px;
  height: 365px;
  background: #F5F5F5;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  z-index: 2;
  -webkit-transform: translate(-50%, -60%);
  -moz-tranform: translate(-50%, -60%);
  transform: translate(-50%, -60%);
}
.product-card .nissanZ-info, .product-card .nissanM-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 25px;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.product-card .nissanZ-info.active, .product-card .nissanM-info.active {
  opacity: 1;
  visibility: visible;
}
.product-card h1 {
  padding: 2.75em 0 0;
  margin: 0 0 5px;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 2.2em;
  text-transform: uppercase;
}
.product-card span {
  display: block;
  font-size: 0.875em;
  margin-bottom: 5px;
  opacity: 0.75;
}
.product-card p {
  font-size: 0.925em;
  margin-bottom: 30px;
}

.info-wrap a {
  background: #0A0A0A;
}
.info-wrap a:hover {
  background: #0A0A0A;
}

.slider {
  position: absolute;
  width: 500px;
  height: 250px;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -12.5%);
  -moz-tranform: translate(-50%, -12.5%);
  transform: translate(-50%, -12.5%);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}
.slider.active {
  -webkit-transform: translate(-50%, 0);
  -moz-tranform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}
.slider figure {
  margin: 0;
}

.car-nav {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 100%;
  text-align: center;
  -webkit-transform: translate(-50%, 5%);
  -moz-tranform: translate(-50%, 5%);
  transform: translate(-50%, 5%);
  z-index: 5;
}
.car-nav a {
  margin: 0 10px 0;
  width: 10%;
  background: #FFF;
  color: #000;
}
.car-nav a:hover {
  background: rgba(255, 255, 255, 0.8);
}

.bg-color {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-tranform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(0, #141414 50.1%, #0A0A0A 50%);
  z-index: 1;
  display: none;
}

/*=== Slick Properties ===*/
.slick-dots {
  bottom: -10%;
}
.slick-dots a {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}
.slick-dots span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-tranform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
}
.slick-dots rect {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 64 64;
  stroke-dashoffset: 64;
  transition: all 0.9s ease-in-out;
  transition: stroke-dashoffset 0.5s;
}
.slick-dots .slick-active rect {
  stroke-dashoffset: 0;
}
</style>
</head>
<body>
  <div class="product-card z-depth-1">
        <div class="nissanZ-info active">
            <h1>Nissan 370Z</h1>
            <span>Sports Car</span>
            <p>It's a living legend. With the emphasis on living. The iconic lines, low center of gravity, wide track, and short wheelbase give it that unmistakable, instantly recognizable profile.</p>
            <div class="info-wrap">
                <a class="waves-effect waves-light btn-large" href="#">More Info</a>
                <a class="waves-effect waves-light btn-large" href="#">Get Quote</a>
            </div>
        </div>
        <div class="nissanM-info">
            <h1>Nissan Maxima</h1>
            <span>Sedan Car</span>
            <p>With 300 horsepower, a performance tuned suspension, a luxurious driver’s cockpit loaded with technology, and a Sport Mode setting that’ll get your heart racing, it really isn’t a sedan after all.</p>
            <div class="info-wrap">
                <a class="waves-effect waves-light btn-large" href="#">More Info</a>
                <a class="waves-effect waves-light btn-large" href="#">Get Quote</a>
            </div>
        </div>
    </div>
    <div class="slider active" id="nissanZ">
        <figure data-color="#141414, #0A0A0A">
            <img src="https://i515.photobucket.com/albums/t355/Zson718/blackZ_zpsgjv0ch8v.png" class="responsive-img" />
        </figure>
        <figure data-color="#D9D9D3, #D2D2CA">
            <img src="https://i515.photobucket.com/albums/t355/Zson718/whiteZ_zpskgzsbwic.png" class="responsive-img" />
        </figure>
        <figure data-color="#122554, #0D1B3E">
            <img src="https://i515.photobucket.com/albums/t355/Zson718/blueZ_zpsqb9ka7ok.png" class="responsive-img" />
        </figure>
    </div>
    <div class="slider" id="nissanM">
        <figure data-color="#710910, #58070D">
            <img src="https://i515.photobucket.com/albums/t355/Zson718/redM_zpsmtu6gyln.png" class="responsive-img" />
        </figure>
        <figure data-color="#261918, #1D1312">
            <img src="https://i515.photobucket.com/albums/t355/Zson718/brownM_zpslf4sbzlv.png" class="responsive-img" />
        </figure>
        <figure data-color="#353D46, #2D343C">
            <img src="https://i515.photobucket.com/albums/t355/Zson718/silverM_zpsi7gwlnbg.png" class="responsive-img" />
        </figure>
    </div>
    <div class="car-nav">
        <a class="waves-effect waves-light btn car z active" href="#">370Z</a>
        <a class="waves-effect waves-light btn car m" href="#">Maxima</a>
    </div>
    <div class="bg-color"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js'></script>
      <script id="rendered-js" >
(function (main) {
  main(window.jQuery, window, document);
})(function ($, w, d) {
  function slider() {
    var zSlide = $("#nissanZ");
    var mSlide = $("#nissanM");

    zSlide.slick({
      arrows: false,
      dots: true,
      infinite: true,
      speed: 600,
      fade: true,
      focusOnSelect: true,
      customPaging: function (zSlide, i) {
        var color = $(zSlide.$slides[i]).data('color').split(',')[1];
        return '<a><svg width="100%" height="100%" viewBox="0 0 16 16"><rect width="16px" height="16px" stroke="' + color + '"></rect></svg><span style="background:' + color + '"></span></a>';
      } }).
    on('beforeChange', function (event, slick, currentSlide, nextSlide) {
      colors = $('figure', zSlide).eq(nextSlide).data('color').split(',');
      color1 = colors[0];
      color2 = colors[1];
      bgChange(color1, color2);
    });

    mSlide.slick({
      arrows: false,
      dots: true,
      infinite: true,
      speed: 600,
      fade: true,
      focusOnSelect: true,
      customPaging: function (mSlide, i) {
        var color = $(mSlide.$slides[i]).data('color').split(',')[1];
        return '<a><svg width="100%" height="100%" viewBox="0 0 16 16"><rect width="16px" height="16px" stroke="' + color + '"></rect></svg><span style="background:' + color + '"></span></a>';
      } }).
    on('beforeChange', function (event, slick, currentSlide, nextSlide) {
      colors = $('figure', mSlide).eq(nextSlide).data('color').split(',');
      color1 = colors[0];
      color2 = colors[1];
      bgChange(color1, color2);
    });
  };

  function bgColor(c1, c2) {
    return {
      background: '-moz-linear-gradient(0, ' + c1 + ' 50.1%, ' + c2 + ' 50%)',
      background: '-webkit-linear-gradient(0, ' + c1 + ' 50.1%, ' + c2 + ' 50%)',
      background: 'linear-gradient(0, ' + c1 + ' 50.1%, ' + c2 + ' 50%)' };

  };

  function bgChange(c1, c2) {
    var bg = $(".bg-color");
    var btn = $(".btn-large");
    bg.css(bgColor(c1, c2)).fadeIn(700, function () {
      $("body").css(bgColor(c1, c2));
      bg.hide();
    });
    btn.css({ background: c2 });
  };

  function carChange() {
    var car = $(".car"),
    zInfo = $(".nissanZ-info"),
    mInfo = $(".nissanM-info"),
    zSlide = $("#nissanZ"),
    mSlide = $("#nissanM");

    car.on("click", toggleChange);

    function toggleChange(e) {
      e.preventDefault();

      car.not(this).removeClass('active');
      $(this).addClass('active');

      if ($(this).hasClass('m')) {
        zInfo.removeClass('active');
        zSlide.removeClass('active');
        mInfo.addClass('active');
        mSlide.addClass('active');
        colors(mSlide);
      } else {
        mInfo.removeClass('active');
        mSlide.removeClass('active');
        zInfo.addClass('active');
        zSlide.addClass('active');
        colors(zSlide);
      }
    };

    function colors(slide) {
      var colors = $('figure', slide).data('color').split(','),
      color1 = colors[0],
      color2 = colors[1];

      slide.slick("slickGoTo", 0);
      bgChange(color1, color2);
    };
  };

  function init() {
    slider();
    carChange();
  };

  $(function () {
    init();
  });

});
    </script>
</body>
</html>
 

15. Basic Product card

Made by George V. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Montserrat:300,400,700,800|Open+Sans:300");
body {
  background-image: linear-gradient(to right bottom, #b91eda, #a02ae0, #8234e5, #5d3be8, #1241eb);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

main {
  max-width: 720px;
  margin: 5% auto;
}

.card {
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
  transition: 200ms;
  background: #fff;
}
.card .card__title {
  display: flex;
  align-items: center;
  padding: 30px 40px;
}
.card .card__title h3 {
  flex: 0 1 200px;
  text-align: right;
  margin: 0;
  color: #252525;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
}
.card .card__title .icon {
  flex: 1 0 10px;
  background: #115dd8;
  color: #fff;
  padding: 10px 10px;
  transition: 200ms;
}
.card .card__title .icon > a {
  color: #fff;
}
.card .card__title .icon:hover {
  background: #252525;
}
.card .card__body {
  padding: 0 40px;
  display: flex;
  flex-flow: row no-wrap;
  margin-bottom: 25px;
}
.card .card__body > .half {
  box-sizing: border-box;
  padding: 0 15px;
  flex: 1 0 50%;
}
.card .card__body .featured_text h1 {
  margin: 0;
  padding: 0;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  font-size: 64px;
  line-height: 50px;
  color: #181e28;
}
.card .card__body .featured_text p {
  margin: 0;
  padding: 0;
}
.card .card__body .featured_text p.sub {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  text-transform: uppercase;
  color: #686e77;
  font-weight: 300;
  margin-bottom: 5px;
}
.card .card__body .featured_text p.price {
  font-family: "Fjalla One", sans-serif;
  color: #252525;
  font-size: 26px;
}
.card .card__body .image {
  padding-top: 15px;
  width: 100%;
}
.card .card__body .image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.card .card__body .description {
  margin-bottom: 25px;
}
.card .card__body .description p {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  line-height: 27px;
  font-size: 16px;
  color: #555;
}
.card .card__body span.stock {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #a1cc16;
}
.card .card__body .reviews .stars {
  display: inline-block;
  list-style: none;
  padding: 0;
}
.card .card__body .reviews .stars > li {
  display: inline-block;
}
.card .card__body .reviews .stars > li .fa {
  color: #f7c01b;
}
.card .card__body .reviews > span {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  margin-left: 5px;
  color: #555;
}
.card .card__footer {
  padding: 30px 40px;
  display: flex;
  flex-flow: row no-wrap;
  align-items: center;
  position: relative;
}
.card .card__footer::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 40px;
  width: calc(100% - 40px);
  height: 3px;
  background: #115dd8;
  background: linear-gradient(to right, #115dd8 0%, #115dd8 20%, #ddd 20%, #ddd 100%);
}
.card .card__footer .recommend {
  flex: 1 0 10px;
}
.card .card__footer .recommend p {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  color: #555;
}
.card .card__footer .recommend h3 {
  margin: 0;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #115dd8;
}
.card .card__footer .action button {
  cursor: pointer;
  border: 1px solid #115dd8;
  padding: 14px 30px;
  border-radius: 200px;
  color: #fff;
  background: #115dd8;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  transition: 200ms;
}
.card .card__footer .action button:hover {
  background: #fff;
  color: #115dd8;
}
</style>
</head>
<body>
  <main>
    <div class="card">
      <div class="card__title">
        <div class="icon">
          <a href="#"><i class="fa fa-arrow-left"></i></a>
        </div>
        <h3>New products</h3>
      </div>
      <div class="card__body">
        <div class="half">
          <div class="featured_text">
            <h1>Nurton</h1>
            <p class="sub">Office Chair</p>
            <p class="price">$210.00</p>
          </div>
          <div class="image">
            <img src="https://images-na.ssl-images-amazon.com/images/I/613A7vcgJ4L._SL1500_.jpg" alt="">
          </div>
        </div>
        <div class="half">
          <div class="description">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero voluptatem nam pariatur voluptate perferendis, asperiores aspernatur! Porro similique consequatur, nobis soluta minima, quasi laboriosam hic cupiditate perferendis esse numquam magni.</p>
          </div>
          <span class="stock"><i class="fa fa-pen"></i> In stock</span>
          <div class="reviews">
            <ul class="stars">
              <li><i class="fa fa-star"></i></li>
              <li><i class="fa fa-star"></i></li>
              <li><i class="fa fa-star"></i></li>
              <li><i class="fa fa-star"></i></li>
              <li><i class="fa fa-star-o"></i></li>
            </ul>
            <span>(64 reviews)</span>
          </div>
        </div>
      </div>
      <div class="card__footer">
        <div class="recommend">
          <p>Recommended by</p>
          <h3>Andrew Palmer</h3>
        </div>
        <div class="action">
          <button type="button">Add to cart</button>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

16. 3D Product Card

Made by M. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://use.fontawesome.com/40cc0aa74e.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: montserrat;
  perspective: 1000px;
  transform-style: preserve-3d;
  background: #eee;
}

.product-card-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 850px;
}
.product-card-container .product-card {
  width: 25em;
  height: 25em;
  background: #ccc;
  position: relative;
  padding: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-style: preserve-3d;
}
.product-card-container .product-card:after {
  content: "";
  width: 100%;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: -60px;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}
.product-card-container .product-card .info-icon-container {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  margin: 1em 1em;
  z-index: 3;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(20px);
}
.product-card-container .product-card .info-icon-container:hover .info-icon .bar-1 {
  width: 45px;
}
.product-card-container .product-card .info-icon-container:hover .info-icon .bar-2 {
  width: 36px;
}
.product-card-container .product-card .info-icon-container:hover .info-icon .bar-3 {
  width: 30px;
}
.product-card-container .product-card .info-icon-container .info-icon {
  cursor: pointer;
  position: relative;
  background: red;
}
.product-card-container .product-card .info-icon-container .info-icon .bar-1,
.product-card-container .product-card .info-icon-container .info-icon .bar-2,
.product-card-container .product-card .info-icon-container .info-icon .bar-3 {
  background: white;
  height: 1px;
  transition: all 0.4s ease;
}
.product-card-container .product-card .info-icon-container .info-icon .bar-2 {
  width: 30px;
}
.product-card-container .product-card .info-icon-container .info-icon .bar-1,
.product-card-container .product-card .info-icon-container .info-icon .bar-3 {
  width: 20px;
  position: absolute;
}
.product-card-container .product-card .info-icon-container .info-icon .bar-1 {
  top: 10px;
}
.product-card-container .product-card .info-icon-container .info-icon .bar-3 {
  bottom: 10px;
}
.product-card-container .product-card .info-icon-container p {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.2rem;
  margin-left: 30px;
}
.product-card-container .product-card::before {
  content: "";
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.product-card-container .product-card .header {
  display: flex;
  flex-direction: column;
  z-index: 2;
  position: relative;
  color: white;
}
.product-card-container .product-card .header h1 {
  font-size: 2em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
  transform: translateZ(50px);
}
.product-card-container .product-card .header button {
  color: white;
  border-radius: 50px;
  border: 1px solid white;
  background: rgba(0, 0, 0, 0);
  width: 15em;
  height: 3em;
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.3s ease-in-out;
  transform: translateZ(10px);
}
.product-card-container .product-card .header button:hover {
  transform: translateZ(100px);
  background: white;
  color: black;
}
.product-card-container .product-card .header button:focus {
  outline: none;
}
.product-card-container .product-card .header button .fa-shopping-bag {
  margin-left: 1rem;
  transform: translateZ(50px);
}
.product-card-container .product-card .header em {
  font-style: italic;
  text-align: center;
  font-weight: 300;
  transform: translateZ(20px);
}
.product-card-container .product-card .product-img {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -5rem;
  z-index: 3;
  transition: all 0.3s ease-in-out;
  perspective: 850px;
  transform: translateZ(40px);
}
.product-card-container .product-card .product-img img {
  width: 15em;
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.5));
}
.product-card-container .product-card .product-img:after {
  content: "";
  width: 100%;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: -10px;
}
.product-card-container .product-card .bg-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.product-card-container .product-card .bg-img img {
  width: 25em;
  z-index: 1;
}

.coords, .coords-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 1rem;
}

.coords-2 {
  margin-bottom: 2rem;
}
</style>
</head>
<body>
  <div class="product-card-container">
	<div class="product-card">
		<div class="info-icon-container">
			<div class="info-icon">
				<div class="bar-1"></div>
				<div class="bar-2"></div>
				<div class="bar-3"></div>
			</div>
<!-- 			<p>Customize</p> -->
		</div>
		
		<div class="header">
			<h1>Headphones</h1>
			<button>Add To Bag <i class="fa fa-shopping-bag"></i></button>
			<em>$70.00</em>
		</div> <!-- end of header -->
		<div class="product-img">
			<img src="https://goo.gl/HfpFyP" alt="" />
		</div>
		<div class="bg-img">
			<img src="https://goo.gl/U7XMDL" alt="" />
		</div>
		
	</div> <!-- end of product-card -->
</div><!-- end of product-card-container -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script id="rendered-js" >
const card = $('.product-card'),
coord = $('.coords'),
coord2 = $('.coords-2');

$(document).on('mousemove', function (e) {
  let ax = -($(window).innerWidth() / 2 - e.pageX) / 20,
  ay = ($(window).innerHeight() / 2 - e.pageY) / 20;
  card.css({
    transform: `rotateY(${ax}deg) rotateX(${ay}deg)` });

  // coord.text(`ax: ${ax}, ay: ${ay}`)
  coord.text(`half x: ${-($(window).innerWidth() / 2 - e.pageX)}`);
  coord2.text(`pageX: ${e.pageX}, pageY: ${e.pageY}`);
});
//# sourceURL=pen.js
    </script>
</body>
</html>