top of page


Wix Tricks: Adding cool hover effects to your website images

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.

An Example in Awesome:

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.

Noami Kizhner

How To Make it Happen on Your Own Site:

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

Image Button

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

Image Button Settings

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

Choose Your Images

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

Here is How The Mouseover Effect Will Look Like

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?

Link Your Image to a Page

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.

Prepare Your Images

There are even more fun things you can do with this feature:

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:

Pop-Up Text

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

Create a Moving Button Effect

Switch between trendy vector images:

Change Colors of Icons

The possibilities are endless, so hover away!

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

Was this article helpful?

bottom of page