228 lines
8.4 KiB
CSS
228 lines
8.4 KiB
CSS
.product_img_link {
|
|
display: block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.ybc_img_hover {
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
ul.product_list.grid > li .product-container .product-image-container {
|
|
border: 1px solid #d6d4d4;
|
|
margin-bottom: 13px;
|
|
padding: 9px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
/*----------------------zoom effect------------*/
|
|
.product-image-container .zoom:nth-child(2),
|
|
.product-box .product-image .zoom:nth-child(2),
|
|
.product-image-container .zoom.ybc_img_hover,
|
|
.product-box .product-image .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-container:hover .product-image-container .zoom:nth-child(2),
|
|
.product-box:hover .product-image .zoom:nth-child(2),
|
|
.product-box:hover .product-image .zoom.ybc_img_hover,
|
|
.product-container:hover .product-image-container .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-image-container .fade:nth-child(2),
|
|
.product-box .product-image .fade:nth-child(2),
|
|
.product-image-container .fade.ybc_img_hover,
|
|
.product-box .product-image .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-container:hover .product-image-container .fade:nth-child(2),
|
|
.product-box:hover .product-image .fade:nth-child(2),
|
|
.product-box:hover .product-image .fade.ybc_img_hover,
|
|
.product-container:hover .product-image-container .fade.ybc_img_hover {
|
|
opacity: 1;
|
|
}
|
|
/*----------------------end of fade effect-------------*/
|
|
|
|
/*-----------vertical_scrolling bottom to top effect-------------------*/
|
|
.product-image-container .vertical_scrolling_bottom_to_top:nth-child(2),
|
|
.product-box .product-image .vertical_scrolling_bottom_to_top:nth-child(2),
|
|
.product-image-container .vertical_scrolling_bottom_to_top.ybc_img_hover,
|
|
.product-box .product-image .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-container:hover .product-image-container .vertical_scrolling_bottom_to_top:nth-child(2),
|
|
.product-box:hover .product-image .vertical_scrolling_bottom_to_top:nth-child(2),
|
|
.product-box:hover .product-image .vertical_scrolling_bottom_to_top.ybc_img_hover,
|
|
.product-container:hover .product-image-container .vertical_scrolling_bottom_to_top.ybc_img_hover {
|
|
top:0;
|
|
}
|
|
/*------------end of vertical_scrolling effect-------------*/
|
|
|
|
/*-----------vertical_scrolling top to bottom effect-------------------*/
|
|
.product-image-container .vertical_scrolling_top_to_bottom:nth-child(2),
|
|
.product-box .product-image .vertical_scrolling_top_to_bottom:nth-child(2),
|
|
.product-image-container .vertical_scrolling_top_to_bottom.ybc_img_hover,
|
|
.product-box .product-image .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-container:hover .product-image-container .vertical_scrolling_top_to_bottom:nth-child(2),
|
|
.product-box:hover .product-image .vertical_scrolling_top_to_bottom:nth-child(2),
|
|
.product-box:hover .product-image .vertical_scrolling_top_to_bottom.ybc_img_hover,
|
|
.product-container:hover .product-image-container .vertical_scrolling_top_to_bottom.ybc_img_hover {
|
|
top:0;
|
|
}
|
|
/*------------end of vertical_scrolling effect-------------*/
|
|
|
|
/*-----------horizontal_scrolling left to right effect-------------------*/
|
|
.product-image-container .horizontal_scrolling_left_to_right:nth-child(2),
|
|
.product-box .product-image .horizontal_scrolling_left_to_right:nth-child(2),
|
|
.product-image-container .horizontal_scrolling_left_to_right.ybc_img_hover,
|
|
.product-box .product-image .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-container:hover .product-image-container .horizontal_scrolling_left_to_right:nth-child(2),
|
|
.product-box:hover .product-image .horizontal_scrolling_left_to_right:nth-child(2),
|
|
.product-box:hover .product-image .horizontal_scrolling_left_to_right.ybc_img_hover,
|
|
.product-container:hover .product-image-container .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-image-container .horizontal_scrolling_right_to_left:nth-child(2),
|
|
.product-box .product-image .horizontal_scrolling_right_to_left:nth-child(2),
|
|
.product-image-container .horizontal_scrolling_right_to_left.ybc_img_hover,
|
|
.product-box .product-image .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;
|
|
}
|
|
.product-container:hover .product-image-container .horizontal_scrolling_right_to_left:nth-child(2),
|
|
.product-box:hover .product-image .horizontal_scrolling_right_to_left:nth-child(2),
|
|
.product-box:hover .product-image .horizontal_scrolling_right_to_left.ybc_img_hover,
|
|
.product-container:hover .product-image-container .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;
|
|
}
|
|
/**/
|
|
/*------------end of horizontal_scrolling effect-------------*/
|
|
/*
|
|
.product_img_link img
|
|
{
|
|
-webkit-transform: perspective(600px) rotatey( 0deg );
|
|
-o-transform: perspective(600px) rotatey( 0deg );
|
|
transform: perspective(600px) rotatey( 0deg );
|
|
-webkit-backface-visibility: hidden;
|
|
-o-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: -webkit-transform 0.5s linear 0s;
|
|
transition: -o-transform 0.5s linear 0s;
|
|
transition: transform 0.5s linear 0s;
|
|
}
|
|
|
|
.product_img_link > .flip3d.ybc_img_hover{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-transform: perspective(600px) rotatey( 180deg );
|
|
-o-transform: perspective(600px) rotatey( 180deg );
|
|
transform: perspective(600px) rotatey( 180deg );
|
|
-webkit-backface-visibility: hidden;
|
|
-o-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
transition: -webkit-transform 0.5s linear 0s;
|
|
transition: -o-transform 0.5s linear 0s;
|
|
transition: transform 0.5s linear 0s;
|
|
}
|
|
.product-container:hover .product-image-container img:nth-child(2),
|
|
.product-box:hover .product-image .img:nth-child(2),
|
|
.product-box:hover .product-image .img.ybc_img_hover,
|
|
.product-container:hover .product-image-container .img.ybc_img_hover
|
|
{
|
|
-webkit-transform: perspective(600px) rotatey( -180deg );
|
|
-o-transform: perspective(600px) rotatey( -180deg );
|
|
transform: perspective(600px) rotatey( -180deg );
|
|
}
|
|
.product-container:hover .product-image-container .flip3d:nth-child(2),
|
|
.product-box:hover .product-image .flip3d:nth-child(2),
|
|
.product-box:hover .product-image .flip3d.ybc_img_hover,
|
|
.product-container:hover .product-image-container .flip3d.ybc_img_hover
|
|
{
|
|
-webkit-transform: perspective(600px) rotatey( 0deg );
|
|
-o-transform: perspective(600px) rotatey( 0deg );
|
|
transform: perspective(600px) rotatey( 0deg );
|
|
}
|
|
|
|
*/ |