How to add fade transition between normal and hover?

I love that Blocs 4 added filters to custom classes. I’ve added b/w filters to picture on hover but I don’t see any option to create fade transition from normal to hover. Is there an option to do that? Maybe with custom attributes?

You‘d need to add some custom CSS for that. Sadly transitions are not yet supported in the class manager. But who knows what the future brings …

Hi, have a look at www.lunatix.co.uk and go to the large landscape images.
I gave the pics a class of ‘roll-fade’ and pasted the below in the header. This example shows a picture enlarging on rollover, but don’t see why B&W shouldn’t work. Worth a try?

<style>
.roll-fade { 
transition: all 0.25s ease-in-out;
}
.roll-fade a { 
transition: all 0.25s ease-in-out;
}
</style>
1 Like

Given you add the styles you want to change in the class editor :wink:

1 Like

Yes I can but I don’t see “transition” delay. I can code whole thing like @TrevReav said but I would rather use custom class + add transition.

Hi @piotrek, 3 screen shots attached. I set this class (illustrollover, plus others for web, visuals etc) for the main pics on the homepage, which give the enlargement settings for each background image.
normal - 100%
hover - 110%
active - 125%

and assigned this (these) to their relevant items in the classes box, along with the ‘roll-fade’ class, and it seemed to work for me.

So in effect, the ‘illustrollover’ class takes care of the non-fading transitions, and adding the ‘roll-fade’ class alongside smoothes it all out.

Hope that makes sense!

2 Likes

Took me a second to understand but it works great! Thank you!

1 Like

This is a cool website, but why does it take so long for the thumb previews to load?
I know it’s not me, because I have gigabit speed.

They are near instant for me. Your internet connection is only one part of the chain. Lots of variables such as were the host is located, the server, the plan etc.

1 Like