CodePen Embed - Product Card

<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>

@mixin flex ($dir: row, $wrap: wrap, $ai: center, $jc: center, $ac: center){
  display: flex;
  flex-direction: $dir;
  flex-wrap: $wrap;
  align-items: $ai;
  justify-content: $jc;
  align-content: $ac;
}
@mixin imagen ($url: '', $size: cover, $posicion: center, $repeat: no-repeat, $parallax: false) {
  @if  $url != '' {
    background-image: url($url);
  }
  background-size: $size;
  background-position: $posicion;
  background-repeat: $repeat;
  @if $parallax == true {
    background-attachment: fixed;
  }
}
$negro: #1d1d1d;
$blanco: #fff;
$primario: #b82d44;

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&family=Roboto:wght@300;400;900&display=swap');

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

.contenedorCards{
  @include flex;
  min-height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  .card{
    width: 300px;
    transition: ease all .3s;
    &.esFav{
      .wrapper{
        .infoProd{
          .actions{
            .action{
              &.aFavs{
                transform: rotateX(360deg) scale(1.2);
                svg{
                  path, circle{
                    fill: $blanco;
                    transition-delay: .2s;
                  }
                }
              }
            }
          }
        }
      }
    }
    &.enCarrito{
      .wrapper{
        .infoProd{
          .actions{
            .action{
              &.alCarrito{
                .inCart{
                  transform: scale(1);
                }
                .outCart{
                  transform: scale(0);
                }
              }   
            }
          }
        }
      }
    }
    .wrapper{
      margin: 60px 10px 10px 10px;
      padding-top: 300px;
      box-sizing: border-box;
      position: relative;
      box-shadow: 0 0 20px 10px rgba($negro,.1);
      transition: ease all .3s;
      &:hover{
        transform: translateY(-10px);
        .imgProd{
          height: 350px;
        }
      }
      .colorProd{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background-color: $primario;
      }
      .imgProd{
        @include imagen('', contain, center bottom);
        position: absolute;
        bottom: calc(100% - 300px);
        width: 100%;
        height: 300px;
        transition: ease all .3s;
      }
      .infoProd{
        @include flex(column, nowrap);
        height: 170px;
        padding: 20px;
        box-sizing: border-box;
        p{
          width: 100%;
          font-size: 14px;
          text-align: center;
        }
        .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;
        }
        .extraInfo{
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .actions{
          @include flex($jc: space-between);
          width: 100%;
          margin-top: auto;
          padding-top: 10px;
          .preciosGrupo{
            flex-grow: 1;
            position: relative;
            .precio{
              font-family: "Roboto",sans-serif;
              color: $negro;
              font-size: 25px;
              font-weight: 600;
              text-align: left;
              &.precioOferta{
                position: absolute;
                left: 0;
                top: -15px;
                color: red;
                font-size: 15px;
                text-decoration: line-through;
                &:before{
                  font-size: 12px;
                }
              }
              &:before{
                content: var(--currencyPrefix);
                font-size: 20px;
              }
            }
          }
          .action{
            @include flex;
            margin-left: 15px;
            width: 35px;
            height: 35px;
            position: relative;
            transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all .3s;
            cursor: pointer;
            color: $negro;
            svg{
              position: absolute;
              transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all .3s;
              path, circle{
                stroke: currentColor;
                fill: transparent;
                transition: ease all .3s;
              }
            }
            &.aFavs{
              position: absolute;
              top: 20px;
              right: 20px;
              z-index: 1;
              width: 25px;
              height: 25px;
              color: $blanco;
            }
            &.alCarrito{
              svg{
                &.inCart{
                  transform: scale(0);
                }
              }
            }
          }
        }
      }
    }
  }
}

View Compiled

//Producto a favoritos
$('.card .aFavs').click(function(){
  $(this).parents('.card').toggleClass('esFav');
})
//Producto al carrito
$('.card .alCarrito').click(function(){
  $(this).parents('.card').toggleClass('enCarrito');
})

This Pen is owned by Jorge Aguilar on CodePen.

See more by @JorgeAguilar on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js