Streaming live at 10am (PST)

Crossfade Effect in Tabs


#1

Hi,

Can anyone tell me how to add the crossfade effect in tabs?


#2

Can you be more specific? Got any examples you are trying to emulate? You looking for a simple shading or the ability to change colours with some sort of interaction?


#3

Yes, sure
Here is an example (demo 1 or demo 2): http://css3.bradshawenterprises.com/cfimg/

I'd like to make the crossfade effect in tabs transition instead of fade in / fade out. I mean, the first image doesn't have to disappear completely before the second image will begin appear.

https://preview.webflow.com/preview/tabs-crossfading?preview=ffd59e1ec23466326d614dddd3854515


#4

So you want to click on a tab and have the image fade as it's 'changing tabs' right?

I would ignore tabs altogether, go with links in boxes, and use interactions to do all that fancy work. Or even a small slider, which has the fading built right in, and even the controls to move between them.


#5

Structure two divs like this

  • Parent element
    • Child element

Parent element
Position: relative, 300px width/height

Child element
Position: absolute, 0/0/0/0, transition: opacity 1000 ease-in-out
Hover: Opacity: 0


#6

Yes, that's exactly what I want.

Here is the structure of the site which I made with Flex (without tabs). https://preview.webflow.com/preview/crossfading-test?preview=9f9c6676a428eb6abddaeffbb7dc12bf

I don't know how to add another image. If I add the second image, it will divide the block on two parts. I need Flex because I want that the images was flexible. And the most important part is – that images should be visible on the 100% height.

The same problem with text blocks for the images.

Thank you in advance


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.