Add transition time on hover

Hi there :smiley:

How can I set the transition time on mouse over? Is this something I have to write in CSS? Because I did not found any time settings in Blocs.

I have some pictures that have a CSS filter “Grayscale” on normal status.

I set that on mouse over the pictures should be in color. This works but it happens directly on hover. I would like to add more milliseconds in this transition so the results it’s a bit smoother.

Many thanks :smiley:

At present the class manager doesn’t have the transition property. So you need to add the CSS to your project/page header.

1 Like

Thanks for the answer @Malachiman

Something like this should work:

<style>
.myfancytransition { 
     opacity: 1;
    transition: all 0.9s ease;
}
.myfancytransition:hover {
 opacity: 1;
 transition: all 0.9s ease;
}
</style>

@Norm it would be soo cool to have transitions added into the custom class :smiley:

Yeah, tickboxes are amazing but it’s really not complicated to add manually. To each project I add standard 4 transition “classes” I just apply when and where needed.

how? with code or with thew custom class? Im doing it with code but I hate the <style> into the html

The answer is written above.