Fade one image into another via CSS

Currently, I’m in the process of creating my new pure CSS-based tabs-functionality. This functionality is based on the CSS :target pseudo-class, and it replaces the JavaScript/jQuery-based tabs I’m used to.


Now, as a finishing touch I wanted the image to the right to fade in and out each time the user clicks a tab. Luckily, this can also be accomplished with pure CSS, and the approach is supported by almost every modern browser. Internet Explorer 8 doesn’t support it – but those users will just have to live without the fade-feature.

/* CSS to handle images and videoes in tabs content */
article.tabs section:target p
{
    /*display: block;*/
    opacity: 1;
}

article.tabs section p
{
    /*    display: none;*/
    opacity: 0;
    -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;
}

/* CSS to handle images and videoes in tabs content */

The code displayed above is pretty straightforward for those of you working with CSS, but it’s just plain revolutionary to me. πŸ™‚ I’m still amazed of the fact that I don’t have to rely on some heavy JavaScript-library to accomplish a feature that looks great and performs amazingly. I use the opacity property to either hide or display the image, and then I use the transition property to enable the fade in and out animation. Of couse, you can control the animation type and length by adjusting the “1s ease-in-out”.

I’m still new to several of the CSS3-methods but I’ll keep on investigating, and I’ll keep on using this blog to document my findings.

UPDATE! Handling Youtube-videos in tabs

It seems that the solution described above had some problems. The problem is that if I don’t use ‘display:none’ and ‘display:block’ to switch between the images, but instead use ‘opacity: 0’ and ‘opacity: 1’ I can’t display Youtube-videos in my tabs. The problem is that the Youtube-video is in an Iframe, and therefore the video will always be on top of every other image – even though the video isn’t displayed. This means that even though a user thinks that the clicks the image being displayed, the Youtube-video will still start.

The obvious solution to this problem would be to switch back to using ‘display:none’ and ‘display:block’. Which works just fine – but then there’s no animation when the user switches between the tabs!

I investigated this problem further – and found a lot of different approaches. Some suggested using ‘visibility:hidden’ and ‘visibility:visible’ – which enabled the animation, but didn’t work with Youtube-videos – and some suggested using CSS3 keyframes. Still some suggested that I adjusted the height of the tabs by using ‘height: 0’ and ‘height: auto’. Β I tried several different approaches – none of them worked.

Finally, I ended up implementing the obvious solution. I move the hidden image/Youtube-video off the screen. This works – the slider animates and I can switch between each tab. Great! πŸ™‚

The following is the code I used:


/* CSS to handle images and videoes in tabs content */
ul.tabs li.target p
{
 opacity: 1;

 position: relative !important;
 left: 0px !important;
}

ul.tabs li p
{
 opacity: 0;

 position: absolute !important;
 left: -9999px !important;

 -webkit-transition: visibility 0s ease-in-out 1s,opacity 1s ease-in-out;
 -moz-transition: visibility 0s ease-in-out 1s,opacity 1s ease-in-out;
 -o-transition: visibility 0s ease-in-out 1s,opacity 1s ease-in-out;
 -ms-transition: visibility 0s ease-in-out 1s,opacity 1s ease-in-out;
 transition: visibility 0s ease-in-out 1s,opacity 1s ease-in-out;
}
/* CSS to handle images and videoes in tabs content */

Advertisements

4 thoughts on “Fade one image into another via CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s