.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; } /**/