CSS Hover Transitions in Hype

Hello. I am looking to have a few group element do a simple css hover transition. Normally I would add some css like:

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

And give the element a class name ‘grow’. Is there something I’m doing wrong. None of my css styles seem to register with my projects. I’ve attached a photo of my project. I’m trying to make the polygon groups do a simple scale upon hovering.

Any suggestions, advice, direction would greatly be appreciated.

perhaps unchecking the checkbox “protect from external styles” within the document-inspector will help.

or add !important to your styles …

1 Like

In this case Hype will still want to control the transform CSS property as it uses it for positioning. For this to work, you will want to also check Position with CSS top/left in the Document Inspector.

If you use other properties that make use of the CSS transform, such as rotation, scale, or skew, it will break your animation.

Also you will notice that Hype’s scene editor will have some fun transitions when moving the element around, as it is affected by your CSS.

Thank you. It was a combination of using !important and checking Position with CSS top/left
It is working now when previewed/exported but I see what you mean about the fun transitions when moving elements around. Everything is jumping around in the layout when building/designing.

1 Like