CODEWITHSUNDEEP
imagecssfadecss-transitions
Jack
Jack

Reputation: 203

CSS Fade Between Background Images on Hover

Is there a way that I can do the following?

I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.

Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}

Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.

UPDATE: I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)

Upvotes: 8

Views: 70397

Answers (8)

Ashish Kumar
Ashish Kumar

Reputation: 211

CSS:-

li { background: url(http://oakdale.squaresystem.co.uk/images/solutions.png) no-repeat left center; background-size: 89px; padding: 54px 0 54px 130px; webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear; }

li:hover { background-size: 50px }

Upvotes: -1

user3242800
user3242800

Reputation: 7

<li class="image transition"></li>

css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}

/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}

.image:hover{
background-image: url("some/file/path_hoverImage.png");
}

Upvotes: 0

Towelie
Towelie

Reputation: 92

I know this may be a tad late. But I was struggling with the same issue for a long time. Also with transparent sprites many solutions don't seem to work.

What I did is this

HTML

<div class="sprite-one">
  <span class="foo"></span><span class="zen"></span>
</div>

CSS

.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen { 
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}

This is a pure css way & has a bit of a lot of coding.. but seems be the only way I achieved the desired effect! Hope people that also stumble onto this can find some help from this!

Upvotes: 0

Benjamin
Benjamin

Reputation: 1001

The latest news on this topic:

Chrome 19 and newer supports background-image transitions:

Demo: http://dabblet.com/gist/1991345

Additional info: http://oli.jp/2010/css-animatable-properties/

Upvotes: 4

Paul D. Waite
Paul D. Waite

Reputation: 98936

I don’t think you can change the opacity of just background images in CSS, so unless you have two separate elements for the background image (one for each position of the sprite) and change the opacity of both of them on hover, I think you’re stuck.

Upvotes: 1

Rauzippy
Rauzippy

Reputation: 61

Take a look at this: http://jsfiddle.net/j5brM/1/

I think this suits all your needs and its a little bit less complicated.

Upvotes: 1

Joseph Hamilton
Joseph Hamilton

Reputation: 454

You haven't specified any code to do the actual transition.

http://css3.bradshawenterprises.com/cfimg1/

Try this out in your hover style:

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out;

Upvotes: 3

Joseph Marikle
Joseph Marikle

Reputation: 78590

li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}

should be 

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}

not sure if that fixes it or not though.

Upvotes: 0

Related Questions