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

User · Answer

With Chris s inspiring post here   https   css-tricks com different-transitions-for-hover-on-hover-off   I managed to come up with this    banner       display block      width 100       background-repeat no-repeat      background-position center bottom      background-image url    images image1 jpg          HOVER OFF         include transition background-image 0 5s ease-in-out          amp  hover               background-image url    images image2 jpg              HOVER ON             include transition background-image 0 5s ease-in-out

User · Answer

I was struggling with this for a bit  I first used a stack of images on top of each other and every three seconds  I was trying to animate to the next image in the stack and throwing the current image to the bottom of the stack  At the same time I was using animations as shown above  I couldn t get it to work for the life of me    You can use this library which allows for   dynamically-resized  slideshow-capable background image    using jquery-backstretch    https   github com jquery-backstretch jquery-backstretch

User · Answer

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    lt div class  title  gt       lt a href     gt HYPERLINK lt  a gt   lt  div gt

User · Answer

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  lt img gt   it will contain normal and hover states at the same time    lt div class  images-container  gt       lt img src  http   lorempixel com 400 200 animals 9   gt       lt img src  http   lorempixel com 400 200 animals 10   gt   lt  div gt     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

User · Answer

If you can use jQuery  you can try BgSwitcher plugin to switch the background-image with effects  it s very easy to use   For example        bgSwitch   bgswitcher           images    style img bg0 jpg   style img bg1 jpg   style img bg2 jpg            effect   fade           interval  10000       And add your own effect  see adding an effect types

User · Answer

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    lt li id  facebook  gt  lt a href  facebook com  gt  lt  a gt  lt  li gt    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

User · Answer

Salam  this answer works only in Chrome  cause IE and FF support color transition     There is no need to make your HTML elements opacity 0  cause some times they contain text  and no need to double your elements    The question with link to an example in jsfiddle needed a small change  that is to put an empty image in  title a like background url link to an empty image   same as you put it in  title a hover but make it empty image  and the code will work    title a   display  block  width  340px  height  338px  color  black  background  url https   upload wikimedia org wikipedia commons 5 59 Empty png  repeat     TRANSISITION    transition  background 1s  -webkit-transition  background 1s  -moz-transition  background 1s  -o-transition  background 1s         title a hover    background  transparent     background  url https   lh3 googleusercontent com -p1nr1fkWKUo T0zUp5CLO3I AAAAAAAAAWg jDiQ0cUBuKA s800 red-pattern png  repeat     TRANSISITION    transition  background 1s  -webkit-transition  background 1s  -moz-transition  background 1s  -o-transition  background 1s      Check this out  https   jsfiddle net Tobasi vv8q9hum

User · Answer

This can be achieved with greater cross-browser support than the accepted answer by using pseudo-elements as exemplified by this answer  https   stackoverflow com a 19818268 2602816

User · Answer

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

User · Answer

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

User · Answer

Try this  will make the background animated worked on web but hybrid mobile app not working   -webkit-keyframes breath    0       background-size  110  auto     50      background-size  140  auto     100     background-size  110  auto            body      -webkit-animation  breath 15s linear infinite     background-image  url images login png       background-size  cover

User · Answer

Considering background-images can t be animated  I created a little SCSS mixin allowing to transition between 2 different background-images using pseudo selectors before and after  They are at different z-index layers  The one that is ahead starts with opacity 0 and becomes visible with hover  You can use it the same approach for creating animations with linear-gradients too  scss  mixin bkg-img-transition   bkg1   bkg2   transTime 0 5s        position  relative      z-index  100      amp  before   amp  after       background-size  cover        content              display  block      height  100       position  absolute      top  0  left  0          width  100           transition  opacity  transTime         amp  before           z-index  -101      background-image  url  quot    bkg1  quot               amp  after           z-index  -100      opacity  0      background-image  url  quot    bkg2  quot               amp  hover         amp  after         opacity  1                   Now you can simply use it with  include bkg-img-transition  quot https   picsum photos 300 300  random quot   quot https   picsum photos g 300 300 quot     You can check it out here  https   jsfiddle net pablosgpacheco 01rmg0qL

User · Answer

If animating opacity is not an option  you can also animate background-size   For example  I used this CSS to set a backgound-image with a delay    before     background-size  0      after     transition  background 0 1s step-end    background-image   path-to-image    background-size  20px 20px

[css] CSS3 background image transition

Examples related to css

Examples related to background

Examples related to background-image

Examples related to css-transitions