today I'm going to show you how to use the new hover box feature in Wix hover box is basically a rollover box that changes and does something different when you roll over it this is something that's been we've been waiting for it for a long time it is in beta mode right now but it will be available to all Wix websites shortly I'm in my pick awakes comm website is in beta so I'm going to have it available to me to show you where you're going to find that it is under the plus icon to add elements you want to scroll to box and then at the top of this you'll see this you just need to either scroll down or click on these handy little dots here to get to the hover box area and the next step is you want to simply choose one of their templates they have a whole bunch of templates to start with but keep in mind that none of these really matter you can change everything about them so whatever one you pick don't worry you can certainly change it to be whatever you want as you edit it so here is my new little hover box when I click on it I can move it around I can resize it I can do these different things but the next step is to figure out what you want on here so there's this default stuff that you can either delete or you can edit it and change it to be what you want you can use this hover box just like anything else and add pictures add text icons whatever it is that you want to add to this very easily just like you do with all other editing things now you'll notice that I just added this little icon here now this isn't actually yet attached to my hover box because it just places it on the page to get it to attach to the hover box you click on it drag it and hold it over the hover box area see how it's popping up a little attached to hover box here that's how you get it to attach to the hover box so that's one major problem I think a lot of people are running into they can't figure out how to add elements to the hover box so that's how you do that once I let go as long as that add to hover box was was there it's going to now be part of that hover box you can see that it is part of the hover box because as I move it it's seeing within that work of that hover box now so it's attached so there's two instances of your of your hover box what a hover box is essentially is a rollover you can have set it up so that when somebody rolls over this this box with their icon or with their mouse they're going to see a different option or a different image or you can set up videos or different photos different colors text anything you want so it's really cool that way I'm gonna delete out a couple of these things you can also have animation so let's say you want to animate it when somebody hovers you can actually find some animation here and choose any of these animation icon items on any of the items on that page you can even customize them so that you can adjust the duration or the delay so maybe you have three items here and they each float in one by one you would just adjust these delays and the duration accordingly to have it go in the order you want now to say let's say I want to preview how this is working just simply click on preview and now when I roll over this you'll see that that text is it's rolling over and this other Texas flying in this isn't the most beautiful hover box but it's just a quick example to show you how it works click on back to editor to get back into the editing abilities and just a couple other quick tips on what you can do with the the hover box which are really cool you can change the background you can change it to any image you want you can adjust the image you can change the color behind the image you can adjust the image opacity so you can play around with like maybe the opacity is 0% when it's in regular mode and then went on hover mode it goes down to 50% or something so that there's a color showing through you can also set up video in the background so you can find any image or in any video within the Wix editor excuse me and and upload that you can even upload your own videos and you those as the background elements so it's very very cool let's say here I go I put my my background in there that's a video one thing that you can also do is go to settings and you can either disable the autoplay if you don't want it to play automatically it's by default it's on so it will play automatically so let's go to preview again I rollover or I actually should not roll over this you'll see that the video is moving there when I roll over it it takes me to my next one so let's say I don't want it to autoplay but I wanted to play in the hover version so I can click on this hit change background hit settings click disable autoplay and now it's not going to play until well for example what I need to do is actually apply it to the hover instance so I'm going to do that there's a little apply to hover tool here which is very useful it only applies the background part of it to the next version so I can hit apply to hover click yes I want to apply to see how it just sit hits said applied there now I click on here now that that video is behind this now let's say I want a pawn roller that's when I want this video to play so now I click on it change background hit settings and to take off that disable autoplay and so now I have the video playing or not playing but as soon as I roll over it it's going to play so very cool thing it's it's a way that it's added interactivity and fun stuff that you could used to do in flash and and you can also do an html5 excuse me but this this way is just so much greater and this is a great new feature to Wix because they didn't have a really good rollover they did have a third-party app but it was a little cumbersome and did not have all the flexibility this has so this is a much better cool tool that you'll be able to start adding to all your Wix websites so enjoy that if you have any questions of course feel free to visit pickax comm and email me with any questions you have and stay tuned for more tips coming on pickax calm and on this YouTube channel thanks .
Here's more info + how the Wix Hover Box works on mobile:
Wix has finally released a great new tool called the Hoverbox, which is essentially a super customizable rollover button. Here I show you how to add a Hoverbox, and how to add elements/animation/video to the regular or hover'ed instance.
Note: the Wix Hoverbox is still in Beta mode, so it is not yet available to all Wix editors, but Wix hopes to release it soon! (Maybe in July 2017?)
Also, in the meantime until the Hoverbox is released to the public, and you just want to add a simple "hover" color effect to any image, here is my post on how to do it: