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

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -