CODEWITHSUNDEEP
csscss-transitions
ppp
ppp

Reputation: 2055

CSS3 background image position fade transition

I have a sprite image with the controls of my slideshow.

I want to change the background position of each control when user hovers over it, so that it looks active.

I am using:

-moz-transition: background-position 0.45s linear;
-webkit-transition: background-position 0.45s linear;
-o-transition: background-position 0.45s linear;

My code is in this fiddle (apparently the bg image is not my controls but a random image).

I want the transition effect to be what someone would expect when hovering over an item (fade maybe), and not the current one that looks like the bg image actually moves.

Any ideas?

Upvotes: 1

Views: 4150

Answers (2)

Michael Righi
Michael Righi

Reputation: 1353

One way you could accomplish this is by placing a hidden span inside your anchor tag with the background-position set to display the area of the sprite you want to show on hover. Initially this span would be hidden with a 0 opacity.

Then, on hover, instead of transitioning the background-position you could transition the opacity to fade it in.

The code would look something like this:

html

<a><span></span></a>

css

a {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;   
  background-image: url("http://example.com/somepic.jpg");
}

a span {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-image: url("http://example.com/somepic.jpg");
  background-position: 150px 210px;
  opacity: 0;
  -moz-transition: opacity 0.45s;
  -webkit-transition: opacity 0.45s;
  -o-transition: opacity 0.45s;
}

a:hover span {
  opacity: 1;
}​​​

You can demo this at http://jsfiddle.net/hespb/5/

Upvotes: 5

amrit_neo
amrit_neo

Reputation: 1759

Your code changes the background position.

 background-position: 150px 210px;

To make it face you need to change the background color, add opacity and animate it.

  background: rgba(255,255,255,0);

Upvotes: -1

Related Questions