How to Add Hover Effect to Shape Wix

The first time I saw the hover box on Wix, I thought the hover effect was so cool. I was pumped to show off the new trick to my clients. But my excitement didn’t last long.

My client hated the rectangle shape. She told me it reminded her of her ex-husband. Whatever it means! Anyways, Wix doesn’t allow anyone to change the shape of the hover box. But there is a workaround. Check out the method below. You will be able to add hover effect to any shape on Wix.

There are three steps to add hover effect to a shape: add a hover box, hide the hover box background by making it transparent, then add a shape of your liking to it. The hover box helps create the hover effect easily. But it has unwanted features. The later two steps hide the unwanted features and add the shape you like.

The tutorial is below.

1. Add hover box

Wix hover box makes creating hover effects very easy. That is why I always add the hover box before I want to create any kind of hover effect. The instruction to add a hover box is below. Feel free to skip this part if you know how to do it already.

1. Click Add icon
2. Click Interactive menu
3. Click Hover Boxes
4. Click a hover box of your liking

2. Hide hover box background image 

Any hover box in Wix has a rectangle border. The background image often fills up the area inside this border and makes the hover box look like a rectangle.  

You cannot change the rectangle border. But you can make the stuff inside that border disappear. Obviously that stuff is the background image. The steps below show you how to hide the background image of the regular side. 

1. Click Regular tab
2. Click Change Background button
3. Click Settings button
4. Change Opacity & Color to 0%

Then repeat the above steps on the hover side.

3. Add a new shape to hover box 

After hiding the background image, your hover box is just an invisible box on your website. This is great because whatever shape added to your hover box creates an illusion that your shape has a hover effect.

The steps below show you how to add a shape of your liking, then add a hover effect to that shape by placing it inside the invisible hover box.

1. Click Add icon
2. Click Decorative 
3. Click Basic Shapes
4. Select a shape of your liking
5. Drag and drop the shape onto your hover box
6. Click Apply to Hover icon
7. Resize the hover box border so that it fits the shape

4. Be creative

The last thing to do is to customize the regular side and the hover side of your shape. I cannot give you the instruction because it is up to your creativity. So be creative. Let me know in the comments if you have questions.