CODEWITHSUNDEEP
csscss-transitions
Spencer May
Spencer May

Reputation: 4505

CSS3 background-image transition

In this website I am making there is an arrow link that when you hover over it it becomes a new image with a cool addition to the image. I had this working completely fine with this code below and I did not edit the code at all but it seems that when I woke up the "all" transition no longer works for this. I can't find what is wrong. I am also using this to fade a background-image that is a solid color to fade to another background image that is a different solid color.

a.visitarrow
{
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;        
transition:all 1.0s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visit.png');
}

a.visitarrow:hover
{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;        
transition:all 0.5s ease-in-out;
display:block;
width:130;
height:121;
background-image:url('pictures/visithover.png');
}

Upvotes: 1

Views: 4415

Answers (1)

katacarbix
katacarbix

Reputation: 45

I believe this should work:

a.visitarrow {
    display: block;
    width: 130;
    height: 121;
    -webkit-transition: 1.0s ease-in-out;
    -moz-transition: 1.0s ease-in-out;
    -o-transition: 1.0s ease-in-out;
    -ms-transition: 1.0s ease-in-out;        
    transition: 1.0s ease-in-out;
    background-image: url('pictures/visit.png');
}

a.visitarrow:hover {
    background-image: url('pictures/visithover.png');
}

Upvotes: 1

Related Questions