Adi Pîslaru Adi Pîslaru - 5 months ago 22
CSS Question

Animation not working on Chrome

I made a zoom-effect on a background of a div.
All worked till today when it stopped functioning for Chrome. For every other browser it works perfectly.

here is my code:



.project_image {
width: 582px;
height: 280px;
background-position: center;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
background-size: 100%;
}

.project_image:hover {
background-size: 110%;
}





On Chrome, when i hover the div, the background-size is set instantly to 110%, not slowly as wanted.

edit: fiddle https://jsfiddle.net/ca79cohz/

Answer

Add this changes,

.project_image {
background-size: 100% 100%;
}
.project_image:hover {
background-size: 110% 110%;
}
Comments