CSS3 background image transition

Question

I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...

The CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}​

Take a look: http://jsfiddle.net/AK3La/

Solution 1

You can transition background-image. Use the CSS below on the img element:

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.

Solution 2

The solution (that I found by myself) is a ninja trick, I can offer you two ways:

first you need to make a "container" for the <img>, it will contain normal and hover states at the same time:

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

• with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)

• CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)

Basically, you need to hide "normal" state and show their "hover" when you hover it

and that's it, I hope somebody find it useful.

Solution 3

Unfortunately you can't use transition on background-image, see the w3c list of animatable properties.

You may want to do some tricks with background-position.

Solution 4

I've figured out a solution that worked for me...

If you have a list item (or div) containing only the link, and let's say this is for social links on your page to facebook, twitter, ect. and you're using a sprite image you can do this:

<li id="facebook"><a href="facebook.com"></a></li>

Make the "li"s background your button image

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

Then make the link's background image the hover state of the button. Also add the opacity attribute to this and set it to 0.

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

Now all you need is "opacity" under "a:hover" and set this to 1.

#facebook a:hover {
   opacity:1;
}

Add the opacity transition attributes for each browser to "a" and "a:hover" so the the final css will look something like this:

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

If I explained it correctly that should let you have a fading background image button, hope it helps at least!

Solution 5

You can use pseudo element to get the effect you want like I did in that Fiddle.

CSS:

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML:

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

View more solutions

Comments

[Austin Parrish Thomas]

I also made a video tutorial version of it. youtube.com/watch?v=6ieR5ApVpr0

[TLindig]

background-image is not an animatable property (w3.org/TR/css3-transitions/#animatable-properties), so your solution is not standard compliant.

[Sentinel]

This is not a solution - FF and IE do not support it, and as noted above it's not a property the spec says should be supported.

[Neal Stublen]

Nice solution. When experimenting with the first sample, I noticed that if you increase the transition duration to 4s, you can see a very noticable jump when the z-index switches in the middle of the transition. At least on Chrome 35, you can shift the timing of the z-index switch and clean up the transition by changing the property value to "all 4s ease, z-index 1ms" (jsfiddle.net/eD2zL/330).

[Ruffo]

@NealS. you're right. This answer is 2 years old though, I would remove z-index, it seems unnecessary. The images just need to be in order.

[Volker E.]

See also for current development in Fx: bugzilla.mozilla.org/show_bug.cgi?id=546052

[Admin]

@TLindig It should be an animatable property.

[userlond]

Thanks, I'v solved the issue with animating of table background change with use of this plugin.

[Volodymyr Chumak]

Thanks a lot. Your solution is very helpful for me.

[Michael Lynch]

@Hengjie How did you know webkit browsers supported transition: background-image? Source?

[Radek Pech]

If you want a fade-out effect from .after into .before for the background image, you must set the background image into the .before. Otherwise it will just disappear without animation.

[Radek Pech]

This works great, but you may run into 2 problems: 1) if you don't see the :after element, try setting width and height as 100% instead of inherit, 2) if the background-image is actually displayed in foreground, use negative index for the :after element: z-index: -1;

[Markus Ende]

What if I have multiple background images? Can I somehow only address one of the background images to animate?

[Coquelicot]

According to MDN background-image is an animatable property. Perhaps this has changed since 2014?

[Daniel]

Is possible "lazy loading" if I use this solution?

[kjb]

@Coquelicot it must have been added to that list by mistake because it has since been removed.

[fps]

The animatable property is background, and this is what should be used (it works in Chrome for me). Maybe the spec (or the impl) has changed since the question was posted

[mohammed Suleiman]

Still not working on fire fox or IE :(, but looks fine in chrome

[KeithS]

You shouldn't, AFAIK, need to specify the transitions on the hover pseudoclass; the transition definition for the anchor tag type will carry forward to the hover behavior, all you need to change is the opacity. Keep in mind that this example works well because the styles are applied directly to IDs/tag types; if you do this with classes, you have to make sure you aren't adding and removing the class with the transition defined.

[Pedroinpeace]

I am working with this atm and can confirm transition of "background-image" working on Chrome and Safari. It adds a nice touch and I wish FF and IE would implement it as well.

[joronimo]

Very nice solution! Gave me a better understanding of how to make good use of the element states ':before' and ':after' as a bonus :-)

[CalMlynarczyk]

@TLindig's link is dead. The animation type of background-image can be referenced here.

[Cyrille Pontvieux]

I updated this solution using flex grid and no z-index jump: jsfiddle.net/khsejL5p