how to apply css transition to background image

Question

How do i add background transition to background-size if the code is following:

jsfiddle link for complete code : https://jsfiddle.net/3x4vhtj6/

div { background-size: 100% auto; } div:hover { background-size: auto 100%; }

Updated

if This is not possible with the current version of css is their any other way to do this effect with js or jquery.

The problem is you cannot transition between auto. If you can set the values to something other than auto, it works. jsfiddle.net/s3hWj from another thread — Tim Roberts
– Tim Roberts, Commented Feb 24, 2016 at 21:02

Lior Erez · Accepted Answer · 2016-02-24 21:51:47Z

The transition property is what you're looking for. However, you need to use fixed values in order for the transition to work.

If you have no choice, you can still use jQuery in order to calculate the values and then add css properies using the jQuery .css() method.

For your use case, you could write something like this:

jQuery:

$('.my-div').css({ background-size: getBackgroundSize() });

CSS:

div.my-div { transition: all 1s; } div.my-div:hover { transition: all 1s; }

1 Answer 1