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>