In the ever-evolving world of web design, creating dynamic and interactive elements is key to engaging users. One such element is the image hover and reveal interaction, a stunning effect that can be created without any coding. In this comprehensive guide, we will walk you through the process of creating this effect using Framer, a popular interactive design tool. This guide is based on a video tutorial by Studio Marvel, which you can find here.

Setting Up Your Project

To begin, launch Framer and create a new project. Drag a new frame onto the canvas and name it 'page wrapper'. Set this to relative 100, change the desktop layout, and add a gap of 56 pixels on all sides. Then, create your first component, which will be your image hover. Set its width to 90 percent and add a text element titled 'product design'.

Creating the Image Hover Component

Next, create a new frame within the image hover component and name it 'image over'. Set its width to 90 percent and add a text element. Adjust the text size and alignment as desired. To make the component responsive, set the width of all your content to fill.

Adding the Hover Effect

Now, it's time to add the hover effect. Create two more frames within the image over component and set them to relative 100 percent. Name these frames 'left' and 'right'. Then, duplicate these frames and name the duplicates 'image' and 'divider'. Set the width of the image frame to 360 pixels and give it a grey background.

Animating the Hover Effect

To animate the hover effect, you'll need to create two variants of the image over component. Name these variants 'default' and 'over'. In the 'default' variant, bring down the opacity of the image and reduce its size. In the 'over' variant, increase the opacity and size of the image.

Adding Interactions

The final step is to add interactions. For the right-hand side of the image over component, set the interaction to 'Mouse enter' and change it to the 'right' variant. Do the same for the left-hand side, but change it to the 'left' variant.

Customizing Your Image Hover Component

With Framer's variable feature, you can easily customize your image hover component. Simply set variables for the text, number, and image, and you can edit these for each instance of the component.

Wrapping Up

Creating an image hover and reveal interaction in Framer is a straightforward process once you understand the steps involved. The key is to start with a clear layout, add the necessary elements, and then animate these elements. This effect can add a dynamic and interactive element to your web design projects, engaging users and enhancing their experience.

‍