shopping card

Shopping Card

Shopping Card CSS JS HTML | Tarjeta de carrito de compra con CSS y HTML By LittleSnippets.net


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<figure class="snip1583">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample68.jpg" alt="sample68" />
<div class="icons"><a><i class="ion-android-cart"></i></a><a><i class="ion-android-star"></i></a><a><i class="ion-android-share-alt"></i></a></div>
<figcaption>
<h3>Wisteria Ravenclaw</h3>
<div class="price">$15.00</div>
</figcaption>
</figure>
<figure class="snip1583 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample77.jpg" alt="sample77" />
<div class="icons"><a><i class="ion-android-cart"></i></a><a><i class="ion-android-star"></i></a><a><i class="ion-android-share-alt"></i></a></div>
<figcaption>
<h3>Ursula Gurnmeister</h3>
<div class="price">$89.00</div>
</figcaption>
</figure>
<figure class="snip1583"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample71.jpg" alt="sample71" />
<div class="icons"><a><i class="ion-android-cart"></i></a><a><i class="ion-android-star"></i></a><a><i class="ion-android-share-alt"></i></a></div>
<figcaption>
<h3>Ingredia Nutrisha</h3>
<div class="price">$19.00</div>
</figcaption>
</figure>
CSS

@import url(https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:400,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1583{font-family:'Fira Sans Extra Condensed',Arial,sans-serif;position:relative;display:inline-block;overflow:hidden;margin:10px;min-width:230px;max-width:315px;width:100%;font-size:16px;background-color:#fff;color:#111;line-height:1.2em;text-align:left}
.snip1583 *,.snip1583 :after,.snip1583 :before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .35s ease;transition:all .35s ease}
.snip1583 img{max-width:100%;vertical-align:top}
.snip1583 figcaption{padding:10px}
.snip1583 h3{font-size:1.4rem;font-weight:400;margin:0 0 4px}
.snip1583 .price{margin:8px 0;font-weight:700;color:#4da3e2;font-size:1.5rem}
.snip1583 .icons{position:absolute;top:0;bottom:0;left:0;right:0;padding:10px;display:flex;flex-direction:column;justify-content:flex-start}
.snip1583 .icons a{margin:2px;opacity:0;-webkit-transform:translateY(50%);transform:translateY(50%)}
.snip1583 .icons a i{display:block;font-size:23.53px;line-height:40px;width:40px;background-color:#fff;text-align:center;color:#000}
.snip1583 .icons a i:hover{background-color:#4da3e2;color:#fff;cursor:pointer}
.snip1583.hover a,.snip1583:hover a{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
.snip1583.hover a:nth-child(2),.snip1583:hover a:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s}
.snip1583.hover a:nth-child(3),.snip1583:hover a:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}

JS

var snippet = [].slice.call(document.querySelectorAll('.hover'));
if (snippet.length) {
snippet.forEach(function (snippet) {
snippet.addEventListener('mouseout', function (event) {
if (event.target.parentNode.tagName === 'figure') {
event.target.parentNode.classList.remove('hover')
} else {
event.target.parentNode.classList.remove('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