HOW DID THEY DO THIS - ADDED FLAIR WITH GIFS

You may have seen how recently we’ve been very keen to show off how different sites have been using our Rollover app, and we’ve seen some pretty good examples. We’ve seen people use it to add some extra life to their products page, apply motivational messages to beautiful imagery and to give us fun switches between 2D and 3D.

So we thought it would be a fun idea to show you how you too can pull off these effects on your site. We’re going to start things off easy with a Rollover effect from our classic pack and we’re using, as an example, a site we have very recently highlighted.

We’re once again looking at the portfolio of visual designer Sue Ju who has our app multiple throughout her their site. The thing that caught our eye was the Motion page as gifs were used to add some further fluidity to it.

This is how we got on!

As usual here are the clip notes if you prefer.

Firstly go ahead and add our Rollover application from the Wix Market. To do so move over to the left sidebar and press Add Apps. In the search bar we look for Rollover Image Effects.
Click on the rollover and then settings.

Select choose an effect and then switch to the classic pack. The effect we’re looking for is Sharp -> Blur.

Next go to the settings menu and turn off ‘Trigger with Button’. To really get it like the example turn on ‘Add Link to End State’ and add your desired link.

Now go to design and Images. In the start state change the image to a gif image from your pictures folder. In the end state remove the image as you only need to change the picture background. Change the colour to White and the opacity to 90%.

From design go back and this time go into font. We don’t need any text for the start state so just switch to the end state. For both heading and paragraph change the text colour to dark grey/black and the font type to Brandon Grotesque’

Finally we want to go to the text menu and delete all text in the start state while adding our own message to the end state.

And there you go! Click on preview from the editor to see how you got on!

To get a similar layout just move and adjust the sizes of the Rollover app as you want. Duplicate the app to keep the setting the same and from you can start organising them in to the style of collage you after. After you got the layout sorted it’s just a case of going back into each ones settings and swapping the images and text for something new.

We’re not saying this is the exact steps taken by Sue Ju to create the effect but it’s how we’ve to get the a similar effect working.

If you want more great examples on using Rollover Image Effect app check out our blogs Rollover Examples, or if you’d like some more handy tip on using Rollover check out our Tutorial Videos.

If you’d like to add our Rollover app to your site, check out Rollover Image Effects on the Wix Market.

So how do you think we got on? Would you have achieved this effect in another way? We’d love to know! Why not drop us a comment below and let us know!