I'm trying to put a transition on my background-image on hover. This is my Code so far:
HTML
<div class="item-one"></div>
CSS
.item-one {
height: 345px;
width: 256px;
background: url('http://placehold.it/256x345') scroll no-repeat center center;
background-size: cover;
-webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 150%;
}
But this doesn't work for me, tested in different browsers. Other transitions like background-color work as expected. Is there any restriction for transitions on this property?
I think the problem is with background-size: cover
, when you change it to
background-size: 100%;
it will work
There is some other question about background-size: cover
alternative, that can help Is there an alternative to background-size:cover?
Or some different solution for problems like this: CSS3 crossfade bg image when cover is used