Creating Zoom Effects for Images in Repeater in Wix Using Velo

Explore a step-by-step guide on how to implement captivating image zoom effects within a Wix website using Velo. Elevate your site's design with this easy-to-follow tutorial for a dynamic visual experience.

Zoom effect in Repeater

Prerequisite:

Before you start this tutorial, you need to create a Wix site and design a repeater

Step1:Enable CMS (Formerly Known as Content Manager)

To be able to add repeater , all the data must be in the CMS. For that, you need to enable CMS.

From the left side of the editor, select CMS Which is selected in the image.

Step 2: Create a Collection

After, adding CMS to the site, Add a collection (it's like a table in a database).

• Select the CMS icon from the left window panel as you did in the last step, then click on Create Collection

• Or, Click on Add Element > CMS > Create Collection

Name your collection, for example, I gave "images". Then click on Create.

Step 3: Add Fields to the Collection

Click on the "Title" Field > Edit to Edit your field name. I named it "Name" .

Adding Image field

You can Add images

Click on "Add field" (On the right side of the Title field) to Add other fields to the collection.

Now I am adding another field named 'image".

Here, the field type is kept as image.

Step 4: Add data to the collection

Step 5: Insert Dataset to connect the repeater to CMS

Step 6: Configuring Dataset

Step 7: Connect the repeater to the Dataset

Step 8: Connect Repeater Elements

Step 9: Turn On Developer Mode

Step 10: Add Velo Package

Step 11: Giving ID to elements

Step 12:Code

Step 13: Preview and Publish

Output