iTunes uses css transitions to fade images on the iTunes store.

An example of a page using this effect is attached to the post. I am looking at the top left of the page.

You will need to view that page using Safari 4 to see the effect.

What's the simplest code to achieve this effect using css transitions?

1 answer

richard 18
-1
points

I think u can use CSS3 transitions: http://www.w3.org/TR/css3-transitions/ This indeed, will only work in Webkit browsers.

Here's another example from the Surfin Safari blog:

div {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
}

div:hover {
    opacity: 0;
}

I would place the images invisible inside anchors and make them visible on hover. Something like:

<a id="transition" href="#"><img src=img.png /></a>

#transition img {
    opacity: 0;
}
#transition:hover img {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
}
Answered about 7 years ago by richard
  • I'm particularly interested in the fact they rotate every few seconds. Rich Bradshaw about 7 years ago