top of page

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.

120 views

Recent Posts

See All

Reach out with questions or for a free design estimate:

As a website designer and graphic designer, I love sharing great tips and tools that make designing easier. As part of my website design services, I train clients on how to update their websites or to do their own SEO (search engine optimization), so I post many of these tips for my clients to train them how to use Wix and other tools to keep their website up-to-date. Keeping websites current is the best way to get found and to keep people coming back to your website. 

Check out all my Design & SEO tips and resources in my blog

bottom of page