html - Chrome Image Transform (image disapears) -
im running problem website i'm developing. (web store) there zoom function on products when hover on them. in chrome seems not work (the image disappear). in firefox , in internet explorer seems work fine.
here sample of happens. in chrome images disappear when hover on them. in other (non web-kit presume) browser works without problems.
does have solution / explanation problem ?
https://jsfiddle.net/pnvkeugs/
<div class="col product-block"> <div class="image"> <a class="img" a="#"> <img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg" alt="example" /> </a> </div> </div>
css:
.product-block:hover { box-shadow: 0 0 4px #d4d4d4; } .product-block:hover .image .img img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-btransform: scale(1.2); transform: scale(1.2); } .product-block .image { display: block; margin-bottom: 0px; position: relative; text-align: center; border-left: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4; overflow: hidden; } .product-block .image .img { transform: rotatex(0deg) rotatey(0deg); -webkit-transform: rotatex(0deg) rotatey(0deg); -moz-transform: rotatex(0deg) rotatey(0deg); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } .product-block .image .img img { -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; }
update css add:
a.img { display: inline-block; vertical-align: top; }
i'd use inline blocks directly parents (div.image
) instead of using floats.
updated jsfiddle: https://jsfiddle.net/paf_sebastien/pnvkeugs/1/
Comments
Post a Comment