How to become more creative with Hover Boxes - Wix Designs

Updated: Jun 26


There is no doubt that Wix has some unique website design features. One popular element that can single handedly change a website's interactive status is the hover box. Whether the box is being used to create visual movement on a website, keep item properties connected, or design unexpected pop-ups, there is no reason that your website should not have hover boxes.


In order to utilize the abilities that a hover box withholds, users must be creative with all elements the hover box can alter. Below is how we utilized hover box features to create a unique website design.


Our Hover Box Flower Design


By setting the hover location to a large area across the screen or prompting the viewer to hover over a location, gathering a visitors mouse location on the screen can easily be achieved. This will allow for unexpected and surprising animations, color changes, item movement, etc. to be performed in a targeted spot.


One example of a surprise packed hover box comes straight from our JJTPOSTS website. The box includes item movement, item transparency, color change, individual item animation, button links, and a unique theme based design. Check out the animation for yourself here.





https://www.jjtposts.com/website-design


The screen shot taken labeled "Before Activation" shows all of the content located inside of the hover box that the viewers can see. The hover box is located from the far left side of the screen over towards the scroll bar for the webpage. In the case of a user holding their mouse over the scroll bar for the entire visit, there is a decorative tree. To help avoid this situation, there is a "Click Me" box to try and entice the viewer to click move their mouse over the hover box.


This image shows the use of hover animation to active color changes, item movement, and internal linking for casual website design.
After Activation

After the mouse has been placed over the hover box, all of the fun animations begin. Hidden items within the webpage are brought to life through movement, item sizing, and color changes.


The following steps take place upon hover activation:

  1. The tree decoration changes to the same color as the background and is moved to the back of the hover box's item arrangement.

  2. The "flower petal" circles that withhold our internal linking have a background color are change. The original color matched the page background, but is changed into a white color to allow the viewer to see the button.

  3. The brand logo and image border are brought forward in arrangement and moved to the center of the flower. These were previously hidden below the transparent flower petals.

  4. The stem of the flower design changes color to mint green and is also moved forward from under the tree decoration.

  5. The "Click Me" element is rearranged to be positioned under the "Website Pricing" button.

In addition, elements prior to being hovered are all stacked and equipped with a rather short 0.05 second fade animation. This makes for the flower to seemingly be moving white it fades into existence.







12 views0 comments