Add to cart - carrito de compra

Add to cart – card

Add to cart card CSS | Tarjeta de carrito de compra con HTML y CSS By LittleSnippets.net


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML


<figure class="snip1268">
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample4.jpg" alt="sq-sample4"/>
<div class="icons">
<a href="#"><i class="ion-star"></i></a>
<a href="#"> <i class="ion-share"></i></a>
<a href="#"> <i class="ion-search"></i></a>
</div>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
<figcaption>
<h2>Denim Shirt</h2>
<p>My family is dysfunctional and my parents won't empower me. Consequently I'm not self actualized.</p>
<div class="price">$65.00 </div>
</figcaption>
</figure>
<figure class="snip1268 hover">
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample17.jpg" alt="sq-sample17"/>
<div class="icons">
<a href="#"><i class="ion-star"></i></a>
<a href="#"> <i class="ion-share"></i></a>
<a href="#"> <i class="ion-search"></i></a>
</div>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
<figcaption>
<h2>Winter Clothes</h2>
<p>If something is so complicated that you can't explain it in 10 seconds, then it's probably not worth knowing anyway.</p>
<div class="price">$75.00 </div>
</figcaption>
</figure>
<figure class="snip1268">
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample15.jpg" alt="sq-sample15"/>
<div class="icons">
<a href="#"><i class="ion-star"></i></a>
<a href="#"> <i class="ion-share"></i></a>
<a href="#"> <i class="ion-search"></i></a>
</div>
<a href="#" class="add-to-cart">Add to Cart</a>
</div>
<figcaption>
<h2>Footwear</h2>
<p>Miss Wormwood: What state do you live in? Calvin: Denial. Miss Wormwood: I don't suppose I can argue with that!</p>
<div class="price">$195.00 </div>
</figcaption>
</figure>
CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1268{font-family:Raleway,Arial,sans-serif;position:relative;overflow:hidden;margin:10px;min-width:220px;max-width:310px;width:100%;color:#333;text-align:center;background-color:#fff;line-height:1.6em}
.snip1268 *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .6s ease;transition:all .6s ease}
.snip1268 .image{position:relative}
.snip1268 img{max-width:100%;vertical-align:top;-webkit-transition:opacity .35s;transition:opacity .35s}
.snip1268 .add-to-cart,.snip1268 .icons{position:absolute;left:20px;right:20px;opacity:0}
.snip1268 .icons{-webkit-transform:translateY(-100%);transform:translateY(-100%);top:20px;display:flex;justify-content:space-between}
.snip1268 .icons a{width:32.5%;background:#fff}
.snip1268 .icons a:hover{background:#000}
.snip1268 .icons a:hover i{color:#fff;opacity:1}
.snip1268 .icons i{line-height:46px;font-size:20px;color:#000;text-align:center;opacity:.7;margin:0}
.snip1268 .add-to-cart{position:absolute;bottom:20px;-webkit-transform:translateY(100%);transform:translateY(100%);font-size:.8em;color:#000;line-height:46px;letter-spacing:1.5px;background-color:#fff;font-weight:700;text-decoration:none;text-transform:uppercase}
.snip1268 .add-to-cart:hover{background:#000;color:#fff}
.snip1268 figcaption{padding:20px 20px 30px}
.snip1268 h2,.snip1268 p{margin:0;text-align:left}
.snip1268 h2{margin-bottom:10px;font-weight:700}
.snip1268 p{margin-bottom:15px;font-size:.85em;font-weight:500}
.snip1268 .price{font-size:1.3em;opacity:.5;font-weight:700;text-align:right}
.snip1268.hover img,.snip1268:hover img{opacity:.8}
.snip1268.hover .add-to-cart,.snip1268.hover .icons,.snip1268:hover .add-to-cart,.snip1268:hover .icons{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}

JS

  $(".hover").mouseleave(
    function () {
      $(this).removeClass("hover");
    }
  );
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones