• 0k
  • 0
Web Design \ NOV 27th 2014

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. In this week’s Wix Tricks, we’re covering the cool image hover effect, how to add it and why you might want to incorporate it into your own site’s design.

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. So now that you know why this feature is the bee’s knees, let’s get down to [hover] business.

An Example in Awesome: www.naomikizhner.com

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. These can be created using the amazing Wix image editor.

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!

Ready to take your business online? Create a free website with Wix!

by The Wix Team
Wix

Get The Wix Blog
Straight to Your Email

Subscribe to the WixBlog And never miss an update!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Join Us! \ 

Get the latest and freshest content on creating
& marketing your Wix website.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email