Wix Designer Tip: Simple Rollover Effect on image
Here is a simple rollover effect achieved with using Wix's Hover Box feature:
To create this rollover effect, I have an medical illustration image on the bottom layer, then I create a Hoverboxes and put them over the image.
In this case, I have just a circle that highlights this area of the image underneath it, and I created a Hoverbox with the Regular state having a clear circle shape with a white border to go over it. I have that circle increase by size by 106% so it's a subtle effect of getting slightly larger. Also in the Hover (rollover) state, I added text in a bubble to the right of the rollover area. This creates a simple but effect image "rollover" with a callout bubble and text. See the screenshots below to see the elements.
Here's where you can add a rollover Hover Box under the + menu bar on the left hand side under Box > Hover Boxes. Don't worry too much if the design you pick to start isn't the exact thing you're looking for, you can edit any of them completely, but it's nice to start with one that is similar to what you're looking for in shape or general look and feel.
This is the Hover Box I created:
Note that rollover effects do not work on mobile. So, in the Wix mobile editor you can choose the elements from your Hover Box to show or hide, on the mobile view, and then resize and move to the location on the image as desired. For more control you may need to create an alternate vertical image or a series of images and elements for the image and rollover information to look best on mobile. In this case, we will create a vertical mobile version that shows all the icons and the text bubbles below the main image vertically.
Remember, every project is different – we find solutions for each client's needs.
If you're looking for help creating an animation for your website or with general website design, reach out for a free estimate.
Comments