Can anyone provide guidance on how to place 8 images in the shape of a rotating circle with the ability to scale and click on each image in Webflow?

Published on
September 22, 2023

To place 8 images in the shape of a rotating circle with the ability to scale and click on each image in Webflow, you can follow these steps:

  1. Create a container element: Start by adding a div block to the section or container where you want the rotating circle of images to be placed. This container will hold all the images.

  2. Add 8 image elements: Within the container element, add 8 image elements. You can either drag and drop the image elements from the Elements panel or use the keyboard shortcut (CMD/CTRL + E).

  3. Position the images in a circle: To position the images in a circle, you can use CSS flexbox. Apply the following CSS to the container element:

display: flex;justify-content: center;align-items: center;

This will align the images in the center of the container.

  1. Rotate the images: To rotate the images in a circle formation, apply the following CSS to each image element:
transform: rotate(45deg);

Note: Adjust the degree value accordingly for each image to achieve the desired circle formation.

  1. Scale and click functionality: To enable scaling and click functionality on each image, you can add interactions in Webflow. Here's how:
  • Select an image element.
  • Go to the "Interactions" panel.
  • Create a new interaction.
  • Choose a trigger for the interaction, such as "Click" or "Hover."
  • Add actions to the interaction, such as scaling the image or navigating to a specific page on click.

Repeat this process for each image element in the rotating circle.

  1. Arrange the images in the desired order: To arrange the images in a specific order within the rotating circle, make sure the order of the image elements in the Webflow Navigator panel reflects the desired order.

  2. Preview and adjust: Preview the page to see how the rotating circle of images appears and functions. If needed, make adjustments to the rotation degrees, scaling, or interaction actions.

That's it! You have successfully placed 8 images in the shape of a rotating circle with the ability to scale and click on each image in Webflow.

Additional questions:

  1. How do I add custom CSS to my Webflow project?
  2. Can I add videos instead of images in a rotating circle in Webflow?
  3. What other interactive features can I add to a rotating circle of images in Webflow?