CODEWITHSUNDEEP
csstransition
user431619
user431619

Reputation:

fade background images with css3

Hey everyone... Im wondering why this wont work? 

.right-article.boy {
    background: transparent url(../images/boxes-bg/boy.jpg) left top no-repeat;
    width: 413px;
    height: 242px;
    -webkit-transition: background 1.5s linear;
    -moz-transition: background 1.5s linear;
    transition: background 1.5s linear;
}

.right-article.boy:hover {
    background: transparent url(../images/boxes-bg/boy-hover.jpg) left top no-repeat;
}

If i change the background to colors like yellow and the hover, black, it works fine.... But not with my images?

Upvotes: 1

Views: 12529

Answers (2)

seler
seler

Reputation: 9213

i can't imagine how image would change during 1.5s.
i would do this a little bit different:
http://jsfiddle.net/seler/48BM4/1/ or http://jsfiddle.net/seler/48BM4/2/

with images it would work like that: http://jsfiddle.net/seler/48BM4/3/

another example iwth auto height and no need to duplicate content:
http://jsfiddle.net/seler/48BM4/7/

Upvotes: 3

Rich Bradshaw
Rich Bradshaw

Reputation: 73055

Have a look at http://css3.bradshawenterprises.com/cfimg/ – I wrote this tutorial to help people with issues like this!

Upvotes: 3

Related Questions