How do I create levitating and auto-rotating images in a multi-column?

[paulgymmarktat]

Hi,

As the title suggests, I would like to upload some logos in a multi-column layout and then make them levitate and rotate. If someone has the solution, I would be very thankful.

The theme is Dawn.

[Vivek_goyal]

Hi @paulgymmarktat 

One of the way to implement the required action is by using Global CSS section in Shopify. Here are the steps to do it -

1. Add multicolumn section in your page
2. Add image to each column
3. Go to Theme Settings > Custom CSS
4. Add the required Custom CSS to auto-rotate & levitating effect for the images in the multicolumn section

Here is the sample CSS for rotating image -

img.multicolumn-card__image {
  animation: spin 5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Just for reference here is the sample image showing the CSS and multicolumn image in action - 

Also, here is a demo video on how to add Global CSS in Shopify - https://youtu.be/nPja-jHwmPc

Hope this will help you! Feel free to reach out if more details are needed.

Thanks & Regards,

Vivek

Scale-up Print

[paulgymmarktat]

hi @Vivek_goyal 

thank you for reply. By rotating, I meant creating a slideshow on a single line to display each logo. Let s say like a braking news banner.

So i need that each logo be on a lifted white card with a bit of shadow in a slideshow on a line.

[Vivek_goyal]

ok, thanks for the details. Do you have any reference URL for the same? You can DM me the details.

[paulgymmarktat]

https://nicepage.com/web-page-design/preview/meet-our-partners-83939?device=desktop

https://bootstrapbrain.com/component/bootstrap-client-or-partners-logo-section-example/