Wix Tricks Adding Cool Hover Effects to Your Website Images

The Wix platform is full ofamazing design capabilities, and while some of them are obvious, some (like the hover effect) take a bit more effort to find. Thats why were here to put the spotlight on these amazing features that may have gone unnoticed. In this weeks Wix Tricks, were covering the cool image hover effect, how to add it and why you might want to incorporate it into your own sites design.

So why use this feature? Adding hover effects to your images can really up your websites 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 bees knees, lets get down to [hover] business.

Its hard to deny: Naomi has used this feature to perfection. If youre 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! Heres 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 dont forget! Since this is a button, it should link to somewhere. People will likely be ready to click once theyve hovered, so give them a good place to go. Product page, anyone?

Handy tip:Its a great idea to prep your images ahead of time. In order to make this hover magic happen, youll need two versions of your picture. A classic choice is one black and white version, and one in color. These can be created using theamazing Wix image editor.

Now that youve got the hang of it, you dont 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!

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

Introducing Wix Code: Creation Without Limits

5 Easy SEO Tips to Boost Your Site in Under an Hour

36 Free Places to Promote Your Website Online

10 Viral Wix Artists From Around the World

Designing with WixHover effectsWeb Design Trends

I was looking for a way to get around the lame social media bar and thought that it wasnt possible. I wanted logos that changed colors when hovered over. The fade to the new color option is perfect. Thanks for making this possible and for writing up a great article on how to do so!

Glad to help, Greg! Send us the link to your Wix site.

This doesnt work now because wix have completely changed their site builder platform. Even the first step doesnt work, because the buttons and menus are now in separate locations. Also double clicking on an image deosnt bring up any mouseover view or clicked on view options. So either wix doesnt allow this option anymore or I just cant find where it is now.

If you could update this article with new instructions that would be awesome!

This post was published before the release of the new editor. Since youre already working on the new platform, you can use this guide to add hover effects:

How can I implement the pop-up text that you are referring to?

Hi Dmitry! Heres a workaround that will allow you to add a pop-up-like effect to your site:

In the new editor, it appears that the exact effect described in the above article is no longer possible. However, it was a fantastic and very useful fuction. Any chance Wix will bring this capability back?

We currently have this feature available on the new editor:

If you want to add a feature request to the Wix Wishlist, wed love it if you could use this form:

When using the new editor it is still possible to apply hover to images without using the gallery platform (I found the options in the gallery limiting). Simply add a button from the icon category, hit change icon, and then you can change the icon to an image of your choice for the regular, hover, and clicked versions.

Is it possible to turn off the click link on this feature?

Hey Sebastien, our customer solutions team will be more than happy to help you with that. You can get in touch with them anytime right here:

Hi guys does this feature still exist? It seems impossible to do the same with the new editor?

Hey Dan, thanks for reaching out! Here is a step-by-step guide of how to create gallery hover effects:

Wed love to see your site when youre done:)

Hello! Im trying to image hover over another image, I dont see anyting with the new editor.

Hey Vivi, our support team will be happy to help you with that. You can reach them anytime by opening a ticket here:

This effect still works perfect! The only problem is that if your image isnt square your button rollover area will be too big for the picture. Here is an example you can see the button from the second image is overlapping the first image and therefore not triggering the rollover on that image. Any help? Thanks!

Hey there, first and foremost AWESOME site!

As for the button, everything looks good on our end if youre still experiencing any difficulties our support team will be happy to assist you. You can reach them anytime by opening a ticket here:

Taking such a simple web site feature like image roll over away from a web site design editor is akin to taking the link ability away. Or is that coming next? Charging extra for this feature in the new editor is a disgusting slime ball move on Wixs part.

Hey Stewart, thanks for reaching out. We have removed the feature on a single image but dont worry! Did you know you can add the hover effects to your galleries to bring them to life? Here is how you can implement it into your site:

I dont know whats wrong, but I dont have this option at all. Am I using a newer version of six? My layout on the side bar for editing and adding doesnt even look the same as the one in the tutorial. I tried this using the buttons & menu category (which is actually just named buttons now), but they only show options for: my buttons, themes, text, icon, and related.

Ive also tried doing this with add images, but its the same result; no option for hover effects. Please help!

Hey there, thanks for reaching out! If you created a site in the past two years you are on the new Wix Editor. So no worries, if your editor looks different. If you would like to learn more about it check out this article:

As for the hover effect, this is an older blog so this feature is no longer available but we have a new feature coming soon with all the bells and whistles to spice up your site!

How can I implement the pop-up text effect? It seems like this was removed.

Hey Mo, if you are looking to grab your site visitors attention we have just the feature! Lightboxes, they are a great way to tell your visitors an important message. You can choose what your lightbox looks like and where it appears on your site! Find out more here:

Hi I am trying to reverse the gallery rollover effect so that they are all faded but become full colour when i hover over an image. I can only make them all full then fade when hovering. is there any way to achieve this? wix seems to have lost a lot of useful hover tools? thanks

Hey Luke, you most certainly can with Gallery Hover Effects! Here is how you can add it to your site:

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

Subscribe to the WixBlog And never miss an update!

Hmmm, thats not a valid email address.

Hmmm, thats not a valid email address. Email already exists

Hmmm, thats not a valid email address. Invalid email

Get the latest and freshest content on creating

Hmmm, thats not a valid email address.

Hmmm, thats not a valid email address. Email already exists

Hmmm, thats not a valid email address. Invalid email