CSS3 background image transition

css background-image transition fade
css background-image transition effects
css image transition effects
css transition: background-image gradient
css transition: background image on hover
image fade in fade out css
image fade in css
border transition css

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/

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.

Crossfading Images, How to use CSS transitions to cross fade an image. Without CSS enabled, you just get two images. Demo 5 - Animating the background-image property. I have the standard CSS for changing the background position on :hover, but the CSS3 transition slides the image up and down with the position. Instead, I want it to simply fade in and out to the new position. Is this possible when working with one image and two positions or will I have to make two separate images (which isn't happening)?

Webkit Transition, I want a fade transition to the hover image. #nav-main ul li.nav-portfolio a { background-image: url(images/nav-portfolio-base.jpg); width: 79px; Craig Buckler demonstrates a neat trick for applying CSS3 transforms to background images. Rotating and skewing elements with stunning backgrounds will now be a breeze!

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!

Background image transition with CSS : css, It works fine, but the transitions were quite "abrupt" without a fade-in effect. So I wrote: .jumbotron-img-1{ background-image: url("/images/myImg1.jpg"); transition​  However, CSS gradients are background images, which are only animatable in Edge and IE 10+. So, while we can make things easier for ourselves and reduce the amount of generated CSS for transitions (as seen in the code below), we’re still not making progress in terms of extending support.

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.

Tutorial on CSS Background Image Hovers & Transitions, In CSS, background-image(s) are used everywhere, but not many people animate or transition them. I wi Tagged with webdev, css, html,  CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: In this chapter you will learn about the following properties: transition-delay. transition-duration. transition-property. transition-timing-function. Browser Support for Transitions.

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>

CSS transition Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Note: Always specify the transition-duration property, otherwise the duration is 0s, and the transition will have no effect. no. Read about animatable. JavaScript syntax: object .style.transition="all 2s" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property.

Changing a Background-image with CSS3 Transitions :: Fleeting , As you may have read, outside of gradients, you can't change a background-​image with CSS transitions. Or can you? At InControl Conference  The transition property is a shorthand property used to represent up to four transition-related longhand properties: These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a

CSS Image Transitions, When unhovered, the background image will crossfade back to the kitten. When a property is being transitioned or animated, getComputedStyle() returns the  C ollection of hand-picked free HTML and CSS image effect code examples: 3d, animated, hover, magnify, overlay, transition, zoom, etc. Update of June 2018 collection. 17 new items. Table of Contents. Image Hover Effects. Image Magnify/Zoom Effects. Image Overlay Effects. Image Shadow Effects. Image Transition and Animation Effects.

css transitions on background-image in WebKit, css transitions on background-image in WebKit - A CodePen by Cameron Adams​. - css-transitions-on-background-images-in-webkit.html. 2 Steps:【1】Enter Any Name 【2】View Report with Full Background Check Details. Instant Unlimited Reports. 100% Guarantee. Stay Anonymous & Secure. Search for Free.

Comments
  • background-image is not an animatable property (w3.org/TR/css3-transitions/#animatable-properties), so your solution is not standard compliant.
  • 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.
  • See also for current development in Fx: bugzilla.mozilla.org/show_bug.cgi?id=546052
  • @TLindig It should be an animatable property.
  • 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
  • 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).
  • @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.
  • Thanks a lot. Your solution is very helpful for me.
  • Is possible "lazy loading" if I use this solution?
  • I also made a video tutorial version of it. youtube.com/watch?v=6ieR5ApVpr0
  • 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.
  • 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;
  • Thanks, I'v solved the issue with animating of table background change with use of this plugin.
  • 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.