background-image transition not working?

Question

I need to do just a simple transition of background img, but searching for tutorials I found out a way to do it. But its not working? Don't know why?

#chat
{
    background-image:url(chat.png);
    width:91px;
    height:40px;
    float:right;
    transition: background-image 1s ease-in-out;
}
#chat:hover
{
    background-image:url(hchat.png);
    width:91px;
    height:40px;

}

Link of code: http://jsfiddle.net/xscsz5c0/2/

Is there something, I am missing? Coz I am not that good in CSS!

Which browser do you use? Seems like it doesn't work in all browsers — Rakhat, Aug 21 '14 at 04:47
It is not necessary to re-declare height and width properties on `:hover` when their value does not change (only re-declare when something changes). — Jakob Jingleheimer, Aug 21 '14 at 05:03
@KheemaPandey then what should I do?? should I change my entire code?? — user3672971, Aug 21 '14 at 05:13
@user3672971 transitioning background-image does not work in Firefox yet. The same question http://stackoverflow.com/questions/9483364/css3-background-image-transition — Rakhat, Aug 21 '14 at 05:27

ralph.m · Accepted Answer · 2014-08-21T05:35:55.980

2

Because background transition doesn't work in Firefox, here's a workaround (which also gets around the problem of the hover image not loading with the page): http://codepen.io/pageaffairs/pen/azHli

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#chat
{
    background:url(http://i62.tinypic.com/29or6z6.png);
    width:91px;
    height:40px;
    position: relative;
    display: inline-block;  
}

#chat::after
{
    content: "";
    display: inline-block;
    background: url(http://i57.tinypic.com/i26j3b.png);
    width:91px;
    height:40px;
    opacity: 0;
    -moz-transition: opacity 5s ease-in-out;
    -webkit-transition: opacity 5s ease-in-out;
    -o-transition: opacity 5s ease-in-out;
    transition: opacity 5s ease-in-out;
}

#chat:hover::after
{
    opacity: 1;
}

</style>
</head>
<body>

<a id="chat" href="chat.php"></a>

</body>
</html>

edited Aug 21 '14 at 05:35

answered Aug 21 '14 at 04:48

ralph.m

13,468
3
23
30

Remember that you have to hover for 5 seconds to see the transition—unless you reduce the time. – ralph.m Aug 21 '14 at 05:11
I kept it 5s just to encounter the change! :) It would be better to check with 5s first! – user3672971 Aug 21 '14 at 05:15
Hm, just checked in FF and it doesn't seem to work with a bg image, although it's fine with plain colors. Weird. – ralph.m Aug 21 '14 at 05:33

score 0 · Answer 2 · answered Aug 21 '14 at 06:02

My favorite way to deal with this is with a jQuery plugin called anystretch. You will need to download the anystretch js file and add it to your project. You will also need to have jquery.

I love anystretch because it replaces the target div with a specified image but also lets you chose a fadeIn time for it.

I had issues with using the css transition because it's cross-browser functionality was horrible.

sample on codepen http://codepen.io/cwilliams23/pen/iIomJ

 $(document).ready(function() {
    $("#chat").mouseenter(function() {
      $("#chat").anystretch("http://i57.tinypic.com/i26j3b.png", {speed: 200});   
    $("#chat").mouseleave(function() {
      $(this).anystretch("http://i62.tinypic.com/29or6z6.png", {speed: 1000});
    });
    });
 });

You can play with the fade times to make it fade the way you want. The speed settings are in ms so 5s would be 5000.

score -1 · Answer 3 · answered Aug 21 '14 at 04:41

-1

Add display:inline-block to your code:

#chat:hover
{
    background-image:url(http://i57.tinypic.com/i26j3b.png);
    width:91px;
    height:40px;
   display:inline-block;

}

Demo

answered Aug 21 '14 at 04:41

prakashstar42

677
1
6
16

background-image transition not working?

3 Answers3