Wix Tricks: Adding cool hover effects to your website images

The Wix platform is full of amazing design capabilities, and while some of them are obvious, some (like the hover effect) take a bit more effort to find. That’s why we’re here to put the spotlight on these amazing features that may have gone unnoticed. It's a great way to make your site more creative and is one of our favorite elements of design. In this week’s Wix Tricks, we’re covering the cool image hover effect, how to add it within your web design and why you might want to incorporate when you create a website.

So why use this feature? Adding hover effects to your images can really up your website’s interactive factor, making people want to hover over all of your images, buttons and more on the off chance that it may reward them with a reaction. Making your site interactive will generally keep people on your site for longer periods of time, and the longer people stay the more likely they are to explore your site further, subscribe, or even make a purchase. It's also a great way to optimize a traditional website background. So now that you know why this feature is the bee’s knees, let’s get down to [hover] business.

It’s hard to deny: Naomi has used this feature to perfection. If you’re anything like us, you probably had to hover over each and every photo on her site, so you can see each and every image come to life with color. She made the effect even more extreme by using a minimalistic approach to the color scheme and general design of her site, using lots of grey scale and keeping the layout uncluttered. Hover heaven.

Time to get technical! Here’s the step-by-step how to:
 From inside the editor, click the Add icon > Buttons & Menus > Image Button:

Double click on the image button to bring up the settings:

Choose your default view image and your mouseover view image. Think of these as the ‘before’ & ‘after’ of your hover effect:

Here is what it will look like when hovering over the image:

And… don’t forget! Since this is a button, it should link to somewhere. People will likely be ready to click once they’ve hovered, so give them a good place to go. Product page, anyone?

Handy tip: It’s a great idea to prep your images ahead of time. In order to make this hover magic happen, you’ll need two versions of your picture. A classic choice is one black and white version, and one in color. You can also take advantage of Wix images to incorporate into your site.

Now that you’ve got the hang of it, you don’t have to stop there. There are so many cool directions you can take this design effect, and here are a few more that we simply love.

Use pop-up text that shows when you hover for another great way to engage with your site visitors:

Use an image that moves or alters slightly (or a lot) when a mouse happens over it:

Switch between trendy vector images:

The possibilities are endless, so hover away!

Learn more about how to make a website with our extensive guide.