Geek Answers Handbook

Going to background size doesn't work

I am trying to set a transition on my background image on hover. This is my code:

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%; }

See JSFIDDLE

But this does not work for me, tested in different browsers. Other transitions, such as background color, work as expected. Is there any restriction for transitions on this property?

+4
source share
2 answers

I think the problem is with background-size: cover when you change it to

 background-size: 100%;

he will work

Jsfiddle

There is another question about the alternative to background-size: cover , which may help. Is there an alternative to background-size: cover?

Or some other solution for such problems: CSS3 crossfade bg image when using cover art

+11
source

You have a typo:

 .item-one { ... -o-transition: background-size 1500 linear ... }

working version below:

 .item-one { background-size: 50%; 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: 100%; }

works fine, it was not wokred before cuz "background-size: cover":

  **'cover':** Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
+1
source

More articles:


All Articles