156 lines
4.4 KiB
CSS
156 lines
4.4 KiB
CSS
.product-thumbnail {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.ybc_img_hover {
|
|
display: inline-block;
|
|
left: 0;
|
|
max-width: 100%;
|
|
top: 0;
|
|
}
|
|
.products .product-miniature {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
/*----------------------zoom effect------------*/
|
|
.product-miniature .zoom:nth-child(2),
|
|
.product-miniature .zoom.ybc_img_hover{
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
transform: scale(0);
|
|
-moz-transform: scale(0);
|
|
-o-transform: scale(0);
|
|
-ms-transform: scale(0);
|
|
-webkit-transform: scale(0);
|
|
transition: all 0.5s ease 0s;
|
|
-moz-transition: all 0.5s ease 0s;
|
|
-webkit-transition: all 0.5s ease 0s;
|
|
-o-transition: all 0.5s ease 0s;
|
|
}
|
|
.product-miniature:hover .zoom:nth-child(2),
|
|
.product-miniature:hover .zoom.ybc_img_hover {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
-moz-transform: scale(1);
|
|
-o-transform: scale(1);
|
|
-webkit-transform: scale(1);
|
|
}
|
|
.ie8 .ybc_img_hover, .ie8 .product-box .ybc_img_hover {
|
|
position: absolute;
|
|
top: 0px;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
}
|
|
.ie8 .product-container:hover .ybc_img_hover,
|
|
.ie8 .product-box:hover img.ybc_img_hover {
|
|
z-index: 0;
|
|
}
|
|
/*----------------------end of zoom effect------------*/
|
|
/*----------------------fede effect-------------------*/
|
|
.product-miniature .fade:nth-child(2),
|
|
.product-miniature .fade.ybc_img_hover{
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0px;
|
|
transition: all 0.5s ease 0s;
|
|
-moz-transition: all 0.5s ease 0s;
|
|
-webkit-transition: all 0.5s ease 0s;
|
|
-o-transition: all 0.5s ease 0s;
|
|
}
|
|
.product-miniature:hover .fade:nth-child(2),
|
|
.product-miniature:hover .fade.ybc_img_hover {
|
|
opacity: 1;
|
|
}
|
|
/*----------------------end of fade effect-------------*/
|
|
|
|
/*-----------vertical_scrolling bottom to top effect-------------------*/
|
|
.product-miniature .vertical_scrolling_bottom_to_top:nth-child(2),
|
|
.product-miniature .vertical_scrolling_bottom_to_top.ybc_img_hover {
|
|
position: absolute;
|
|
top:110%;
|
|
left: 0;
|
|
transition:top 0.5s ease 0s;
|
|
-moz-transition: top 0.5s ease 0s;
|
|
-webkit-transition: top 0.5s ease 0s;
|
|
-o-transition:top 0.5s ease 0s;
|
|
}
|
|
.product-miniature:hover .vertical_scrolling_bottom_to_top:nth-child(2),
|
|
.product-miniature:hover .vertical_scrolling_bottom_to_top.ybc_img_hover {
|
|
top:0;
|
|
}
|
|
/*------------end of vertical_scrolling effect-------------*/
|
|
|
|
/*-----------vertical_scrolling top to bottom effect-------------------*/
|
|
.product-miniature .vertical_scrolling_top_to_bottom:nth-child(2),
|
|
.product-miniature .vertical_scrolling_top_to_bottom.ybc_img_hover {
|
|
position: absolute;
|
|
top:-110%;
|
|
left: 0;
|
|
transition:top 0.5s ease 0s;
|
|
-moz-transition: top 0.5s ease 0s;
|
|
-webkit-transition: top 0.5s ease 0s;
|
|
-o-transition:top 0.5s ease 0s;
|
|
}
|
|
.product-miniature:hover .vertical_scrolling_top_to_bottom:nth-child(2),
|
|
.product-miniature:hover .vertical_scrolling_top_to_bottom.ybc_img_hover {
|
|
top:0;
|
|
}
|
|
/*------------end of vertical_scrolling effect-------------*/
|
|
|
|
/*-----------horizontal_scrolling left to right effect-------------------*/
|
|
.product-miniature .horizontal_scrolling_left_to_right:nth-child(2),
|
|
.product-miniature .horizontal_scrolling_left_to_right.ybc_img_hover {
|
|
position: absolute;
|
|
top:0;
|
|
left:-100%;
|
|
transition:left 0.5s ease 0s;
|
|
-moz-transition: left 0.5s ease 0s;
|
|
-webkit-transition: left 0.5s ease 0s;
|
|
-o-transition:left 0.5s ease 0s;
|
|
}
|
|
.product-miniature:hover .horizontal_scrolling_left_to_right:nth-child(2),
|
|
.product-miniature:hover .horizontal_scrolling_left_to_right.ybc_img_hover {
|
|
left:0;
|
|
}
|
|
/*------------end of horizontal_scrolling effect-------------*/
|
|
|
|
/*-----------horizontal_scrolling right to left effect-------------------*/
|
|
.product-box .product-image {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.product-miniature .horizontal_scrolling_right_to_left:nth-child(2),
|
|
.product-miniature .horizontal_scrolling_right_to_left.ybc_img_hover{
|
|
position: absolute;
|
|
top:0;
|
|
right:-100%;
|
|
transition:right 0.5s ease 0s;
|
|
-moz-transition:right 0.5s ease 0s;
|
|
-webkit-transition:right 0.5s ease 0s;
|
|
-o-transition:right 0.5s ease 0s;
|
|
left: auto;
|
|
}
|
|
.product-miniature:hover .horizontal_scrolling_right_to_left:nth-child(2),
|
|
.product-miniature:hover .horizontal_scrolling_right_to_left.ybc_img_hover {
|
|
right:0;
|
|
}
|
|
|
|
|
|
|
|
/*accessories product*/
|
|
.product-image.product_image {
|
|
border: medium none;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
.product-box .product_desc {
|
|
border: 1px solid #D6D4D4;
|
|
padding: 5px;
|
|
}
|
|
/**/
|