New Feature: Hover Interactions

Be in the know
, ,
1

You can now add hover interactions to containers and sections to create more engaging sites.

Create interactions that transform elements, change designs, and reveal content on hover, without writing any code. Customize the interactions per breakpoint, along with the transition timings and ease.

How:

Select a container or section. Then open the Interactions tab in the inspector (the thunderbolt icon), and click ‘Add Hover Interaction’. Select one of the predefined presets, or create a custom interaction. Then use the play button or click preview to preview the interaction.

Enjoy creating Hover Interactions and please share your feedback with us!

13 Likes
2

Yes!

3

Fantastic!

4

This is awesome! Just a quick question. will it always be tied to a container? For instance, if I wanted a button to float on hover, I would place that in a container first?

5

Hi @wrexe ,
Yes, place the button in a container. By the way, it is also possible to create interactions on items in a repeater.

6

been waiting for this…would be nice to add hover interactions to icons and elements instead of just containers and sections. Hopefully that’s coming? It’d be nice to change the colors of buttons and shapes, etc. Having to put everything in a container seems clunky.

7

Harika

8

Insane! Thank you!!!

9

exactly

10

Hi,

Be carrefull, this function is still buggy.
If you activate hover animation on any element, all your fade transitions in your website will be broken.
And will stay broken, … even if you disable hover animation after.
https://benoitdelval.editorx.io/hoverbeta
Already reported to support…

B.

11

hey @delvalbenoit - have a look at this workaround https://www.editorxcommunity.com/forum/general-discussions/hover-interaction-beta-problem/p-1/dl-608689ebaa7d070015401d9b-6082aed27fc459001580526b-1

12

I managed to use hover interaction on repeater and now my portfolio looks interactive and amazing but lost all link of CMS connected to my repeater based portfolio how can i make it functional

13

Hi @me19140 ,

I’m glad you got to try interactions. I can’t reproduce the issue you are experiencing in a repeater I connected to a CMS.

Do you mind sharing your site so I can take a look?

Thanks,
Carmel

14

my site is
www.akhter.design

15

do u have any answer i am waiting

16

Hi @me19140 ,

I can see both content and an interaction on your published site:
Note that you will only be able to see the interaction + the content when you preview or publish your site.


If the issue is elsewhere, can you please point me to where the problem is? Perhaps a screenshot or a video?

Hope this helps.

Thanks,
Carmel

17

my issue is when i click on image i don’t go to that page. i don’t see any link

18

@me19140 I think I found your issue. It’s not related to interactions. Your images in the repeater have the link. So if you go to the layers panel, you need to move the image above the container in the hierarchy. Then you should be able to see that your images return to being links. Currently the container is on top of your image.

I hope this helps. If not, let us know.

Thanks,
Carmel

19

@carmelsc i already checked and after this i loosed overlay hover

20

@me19140 I see, that’s because the container with the hover effect moved to be below the image.

To achieve the effect you are looking for, try changing the image background to black. Then when creating the hover interaction on the item, choose the image, and set its opacity to 50%. That should create a similar effect.

851×314 30.4 KB

887×607 46.6 KB