SOLVED: CSS Transition on :hover

Bricks Version: 1.3.6
Browser: Chrome 95 & Firefox 94
OS: macOS
URL: (I’m in localhost)

Applying a CSS transition for an image on :hover the effect is showing only when the mouse ‘enter’ the image and not when ‘exit’ from the hover state, here a gif:

I’m not using custom code, just using Bricks settings

Hi Aldo, you can try: all 0.5s ease

Hope this helps

Thanks @HeroRox but this does not work to solve the issue.

Correct @HeroRox,
or alternatively ease-in-out, which is basically the same, but a little bit different :smiley:

I’ll mark this as solved, because it is not a bug.

Best regards,
timmse

@timmse I can’t understand: you’ve marked this solved because it’s not a bug, ok, let’s call it a ‘feature’ but even with the syntax proposed by @HeroRox I still have the same problem, don’t you?

Should I make a new gif to show it?

Hey @Aldo,

I think you might need to be a little bit more clear on what you are hoping for.

If you set hover on an element then it does exactly what it is doing in your gif. It will move when the mouse cursor enters it and then it will go back to the original position when you move your cursor away.

I have a feeling you are hoping for something different however…but not sure what you want?

1 Like

FYI The problem was that I was setting the CSS Transition field in the :hover state instead in the default one.
As @timmse suggest me in another post ( How to set CSS Transform Origin )

Thank you all.

1 Like

Haha, so you were the bug? :smiley:

I’m glad that it works now, but I have a small request: can you please save your screen videos as a video next time? Because you can rewind, fast forward, and even pause it, which is not possible with a GIF :sob:

Have a nice weekend!
timmse

Ok, I made a gif because I don’t know where to host a video and link to it here. I don’t have vimeo or youtube account and the original screencast file was bigger then 4MB that is the max upload limit for the forum. Still looking for a solution for future screencast. :upside_down_face:

Vimeo with its browser extension works perfectly for this (although they have embedding problems at the moment): https://vimeo.com/features/screen-recorder

It uploads the video directly to your Vimeo account into a private folder.
But, of course, there are a ton of alternatives out there:

It’s been a while but still wanted to point out what I believe is the solution to @Aldo 's problem, for anyone having the same issue:
You should add the CSS Transition value to the element on it’s default state, not when the :hover state is active. This way the transition will apply for both mouse-enter and mouse-exit and not only for mouse-enter.
Hope this helps someone!

Hi @matutino , welcome to the forum!

Right, that was the problem :slight_smile:

Ah I’m sorry I missed the message marked as the solution! So I actually didn’t bring any new help to the discussion :sweat_smile:
Thanks for your professional work, @timmse!