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

paulgymmarktat
New Member
7 0 0

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.

 

Replies 4 (4)

scaleupprint
Shopify Partner
40 4 11

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 - 

image.png

 

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

 

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel
paulgymmarktat
New Member
7 0 0

hi @scaleupprint 

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.

scaleupprint
Shopify Partner
40 4 11

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

If you find my post helpful, please like and accept solution
Advanced Product Customizer Image Swatch, Color Swatch, unlimited product options, product designer for personalized products
Email: info@scaleupprint.comFor Shopify tips & tricks follow our YouTube channel