Wix Editor: About Hover Boxes
Hover boxes are a great way to grab your visitors' attention, as they change appearence when visitors hover over them. When visitors move their cursors over hover boxes, they change to reveal different colors, elements, and animation.Hover boxes can bring life to your site, as well as encourage interactivity from your visitors.Learn more about:
Regular and hover view Customizing your hover box Hover box effects Hover boxes on mobileSwitching between regular and hover viewWhen viewing a hover box in the Editor, there are two tabs:
Regular: How the box looks before a user has moved their cursor over it. Hover: How the box looks when a user hovers their cursor over it.Switching between Regular and Hover view allows you to seperately edit each view of the box with ease.To switch between each view, click the box, then select either the Regular or Hover tab.Customizing your hover boxYou can customize the hover box to look exactly the way you want. Adjust the box and make it your own by adding elements, and customizing the design.Click an option below to learn more about customizing your box's design.Adding elementsAdd elements from the left side of the Editor, such as buttons, text, and images to display content on your hover box. You can add elements to show on regular or hover mode, or both. Learn howTip: If an element is too big to add to the box, simply resize it. Customizing the box designAdjust settings such as the fill, border, and corners to suit your site's look and feel, and match the theme. The customization options available depend on the box template you choose. Learn moreHover box effectsEffects bring your Hover Boxes to life. With a range of choices available, you can create an effect that is both eye-catching and fun.Simply open the Hover view of your box, then click Choose Effect to get started. After selecting an effect, click Customize to adjust it. Learn moreClick a option below below to learn more about each effect.GrowThis effect makes your box grow as visitors hover it. This is a great option if you have a lot of content, elements, and information to display on hover mode. You can adjust where it grows from, and how much bigger it gets on hover.ShrinkThis effect makes your box shrink on hover. This is a perfect effect for hover boxes that contain neat, compact information. You can choose how much it shrinks, and where it shrinks from.SkewSkew is a creative way of making your site's pages fun and interactive. The box skews when visitors hover it, and you can adjust settings such as the direction and angle. RotateMake your box spin by adding a rotation effect. You can choose how many degrees it spins, so your box can either spin completely, or change from portrait to landscape on hover, or vice versa. Combo (combine effects)Combo is a great way to really make the hover box your own. Combine settings from other effects to make something completely unique, and interest your visitors.Hover boxes on mobileHover boxes are displayed on your mobile site, unless you choose to hide them from the mobile Editor. As visitors cannot hover on mobile devices, the regular mode is automatically displayed. This cannot be changed. However, you can re-add elements you have added to hover from the Hidden Elements panel.Show me how
Click the Hidden Elements icon  on the left side of the Mobile Editor. Locate the elements under From Hover Interactions. Click the Show Element icon  next to an element to re-add it to your Hover Box.