Añade una barra lateral animada a tu imagen de producto con HTML5 y CSS3

Vista prévia

Descripción

Una barra lateral de producto simple, animada y vertical con botones de acción cuando se desplaza, construido sobre HTML5 y CSS3/SCSS.

Funcionamiento

Inserte una imagen de producto en su página web utilizando HTML5 < Figura > .

<figure>

<img src="demo.jpg" alt="Alt" class="product-image">
</figure>

Cree el código HTML para una barra lateral oculta que contenga botones de acción para esta imagen del producto.

<div class="product-sidebar">

<button class="buy"> <span>BUY ITEM</span> </button>

<button class="info"> <span>MORE INFO</span> </button>

<button class="size"> <span>SIZES</span> </button>

<button class="colors">


<span>



<a href="" class="color black"></a>



<a href="" class="color white"></a>



<a href="" class="color red"></a>


</span>

</button>
</div>

Envuelva la imagen & contenedores de barra lateral en un contenedor de envolturas.

<div class="product">


...

</div>

El CSS necesario para el estilo de la barra lateral del producto y animar & revelarlo cuando se desplaza sobre la imagen del producto. Siéntase libre de modificar y anular el CSS para crear su propio estilo.

.product {

background: #fff;

max-width: 300px;

position: relative;

z-index: 15;

margin: 0 auto;

-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);

-o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.product .product-description {

position: relative;

z-index: 15;

background: #fff;
}

.product .product-description .info {

padding: 15px;

color: #aaa;

font-size: 0.85em;

width: 75%;

float: left;
}

.product .product-description .info h1 {

font-size: 20px;

margin: 0 0 5px;
}

.product .product-description .info p {

margin-bottom: 15px;

line-height: 1.3em;
}

.product .product-description .price {

width: 25%;

float: left;

color: #9bb6aa;

font-size: 3.5em;

position: relative;

margin-top: 25px;
}

.product .product-description .price::before {

content: '$';

position: absolute;

top: 0;

left: -10px;

font-size: 0.35em;
}

.product .product-sidebar {

height: 100%;

background: #31353d;

width: 50px;

position: absolute;

top: 0;

right: 0;

z-index: -1;

-webkit-transition: right 0.3s ease;

-moz-transition: right 0.3s ease;

-o-transition: right 0.3s ease;

transition: right 0.3s ease;

-webkit-border-radius: 0 2px 2px 0;

-moz-border-radius: 0 2px 2px 0;

-o-border-radius: 0 2px 2px 0;

border-radius: 0 2px 2px 0;
}

.product .product-sidebar button {

border: 0;

border-bottom: 1px solid rgba(0, 0, 0, 0.2);

color: #fff;

padding: 0.9em;

font-size: 0.8em;

width: 50px;

height: 50px;

overflow: hidden;

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;
}

.product .product-sidebar button.buy { background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/buy.png") no-repeat 15px; }

.product .product-sidebar button.info { background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/info.png") no-repeat 15px; }

.product .product-sidebar button.size { background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/sizes.png") no-repeat 15px; }

.product .product-sidebar button.colors { background: transparent url("https://raw.githubusercontent.com/brunodsgn/productpreview/master/assets/img/icons/colors.png") no-repeat 15px; }

.product .product-sidebar button.colors span { margin-left: 40px; }

.product .product-sidebar button.colors:hover { width: 130px; }

.product .product-sidebar button.colors .color {

padding: 10px;

display: inline-block;

vertical-align: middle;

margin: 0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";

filter: alpha(opacity=70);

-moz-opacity: 0.7;

-khtml-opacity: 0.7;

opacity: 0.7;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

transition: all 0.3s ease;
}

.product .product-sidebar button.colors .color.black {

background: #000;

border-bottom: 2px solid #555;
}

.product .product-sidebar button.colors .color.white {

background: #fff;

border-bottom: 2px solid #e5e5e5;
}

.product .product-sidebar button.colors .color.red {

background: #EA1535;

border-bottom: 2px solid #EF566D;
}

.product .product-sidebar button.colors .color:hover {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";

filter: alpha(opacity=100);

-moz-opacity: 1;

-khtml-opacity: 1;

opacity: 1;

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);
}

.product .product-sidebar button span {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";

filter: alpha(opacity=0);

-moz-opacity: 0;

-khtml-opacity: 0;

opacity: 0;

white-space: nowrap;

margin-left: 30px;
}

.product .product-sidebar button:hover {

width: 130px;

background-color: #9bb6aa;

position: relative;

background-position: 15px center;

border-color: #9bb6aa;
}

.product .product-sidebar button:hover span {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";

filter: alpha(opacity=100);

-moz-opacity: 1;

-khtml-opacity: 1;

opacity: 1;
}

.product:hover .product-sidebar { right: -50px; }
 @media screen and (max-width: 480px) {

#content { margin-top: 60px; }

.product .product-sidebar {

width: 100%;

height: 50px;

bottom: 0px;

left: 0;

top: inherit;

-webkit-border-radius: 0 0px 2px 2px;

-moz-border-radius: 0 0px 2px 2px;

-o-border-radius: 0 0px 2px 2px;

border-radius: 0 0px 2px 2px;

-webkit-transition: bottom 0.3s ease;

-moz-transition: bottom 0.3s ease;

-o-transition: bottom 0.3s ease;

transition: bottom 0.3s ease;
}

.product:hover .product-sidebar { bottom: -50px; }
}
@media screen and (max-width: 360px) {

.product .product-sidebar { bottom: -50px; }
}