Ritual theme, how to make image media hover?

Technical Q&A
1

I am trying to add a 3D float effect to the product images in the featured collection sections and I have tried everything that Perplexity could think of and nothing is working. How can I accomplish this? This would be an always-o float effect not a selector hover float effect.

Screenshot (482)
Screenshot (482)1920×1200 354 KB

2

Hey @ABdev1

Paste this in the Custom CSS field of your Featured Collection section. I’ve included multiple selectors since I can’t inspect your theme directly, one of them should match:

.card__media img,
.product-card__image img,
.card__image img {
  animation: float3d 4s ease-in-out infinite;
}

@keyframes float3d {
  0%, 100% { transform: translateY(0px) rotateX(2deg) rotateY(2deg); }
  25% { transform: translateY(-6px) rotateX(-2deg) rotateY(3deg); }
  50% { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); }
  75% { transform: translateY(-4px) rotateX(-1deg) rotateY(1deg); }
}

If none of those selectors work, right-click one of the product images in your theme editor preview, click Inspect, and look for the class name on the <img> element. Replace the selectors above with that class.

You can tweak the effect by changing 4s (speed), translateY values (float height), and rotateX/rotateY values (tilt angle).

If this worked for you, mark it as Accepted Solution so others looking for the same effect can find it!

3

When I added that code it gave me some errors regarding the percentage values. I inspected the element and I think it’s img.product-media__image but just in case I went ahead and deactivated the inspection blocker if you want to take a look to confirm.

Screenshot (484)
Screenshot (484)1920×1200 414 KB

4

Thanks for disabling the blocker, I was able to confirm the exact element.
The image selector is img.product-media__image and the featured collection section uses the class section-resource-list.

The Custom CSS field in sections doesn’t support @keyframes, that’s why you got those errors. You need to add it to the theme’s CSS file instead. Here’s the step by step:

  1. Duplicate your theme first (Themes → three dots → Duplicate) so you have a backup

  2. Go to Online Store → Themes → three dots → Edit code

  3. Open Assets → base.css (or your main CSS file)

  4. Paste this at the very bottom of the file:

@keyframes float3d {
  0%, 100% { transform: translateY(0px) rotateX(2deg) rotateY(2deg); }
  25% { transform: translateY(-6px) rotateX(-2deg) rotateY(3deg); }
  50% { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); }
  75% { transform: translateY(-4px) rotateX(-1deg) rotateY(1deg); }
}

.section-resource-list img.product-media__image {
  animation: float3d 4s ease-in-out infinite;
}
  1. Save the file

Using .section-resource-list as the parent selector means the float effect only applies to your featured collection sections, not to every product image across the store.

If you want to adjust the effect: change 4s for speed, the translateY values for how high it floats, and the rotateX/rotateY values for the tilt angle.

If this worked, mark it as Accepted Solution so others can find it!

5

This is where I entered it but it appears to have no effect, did I inject it correctly?

Screenshot (485)
Screenshot (485)1920×1200 292 KB

Screenshot (486)
Screenshot (486)1920×1200 338 KB

6

Oh i’ts weird because I tested it on your live store from the Console and it works. Two things to check:

  1. I noticed you added it to the theme “Copy of 3D Update” which maybe is a draft, not your live theme. Make sure you’re previewing that specific theme (Themes → three dots on “Copy of 3D Update” → Preview) to see the changes. If you’re just opening autobongs.com, you’re seeing your published theme which doesn’t have the code yet.

  2. If you are previewing the right theme and it still doesn’t work, try a hard refresh (Ctrl + Shift + R) to clear the cached CSS.

Let me know!

7

Yes, you can put it at the bottom of base.css.

Here’s the correct code:

.product-media__image {
  animation: float3d 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes float3d {
  0%   { transform: translateY(0%); }
  50%  { transform: translateY(-4%); }
  100% { transform: translateY(0%); }
}

But keep in mind, if you do this in base.css without narrowing it down to a specific section, this will apply to all product card images, on every page… Might be what you want, but probably not. So you have to use base.css carefully.
Your homepage has a few collection sections:

shopify-section-template–20099090317391__product_list_NgyDci
shopify-section-template–20099090317391__product_list_77Happ
shopify-section-template–20099090317391__product_list_Pt9BB8
So targeting just these sections would be:

#shopify-section-template--20099090317391__product_list_NgyDci .product-media__image,
#shopify-section-template--20099090317391__product_list_77Happ .product-media__image,
#shopify-section-template--20099090317391__product_list_Pt9BB8 .product-media__image {
  animation: float3d 4s ease-in-out infinite;
  will-change: transform;
}

@keyframes float3d {
  0%   { transform: translateY(0%); }
  50%  { transform: translateY(-4%); }
  100% { transform: translateY(0%); }
}

Of course, if you don’t want it to apply to a section, you would just delete it, making sure there is a comma between them.

Also, this is only for the image, not the image wrapper itself. If you want it on the entire image wrapper, you can change .product-media__image with .card-gallery

8

It did not appear to have an effect. I am only trying to effect the images in one of the featured collection sections so that’s why Im trying to just use custom css in the section but neither that nor any of the the code ive tried here has done anything.

9

It did not appear to have any effect, im not sure what could be going wrong here.

10

That’s strange because I made sure it worked on my end from the Console before suggesting it. Something must be getting overridden in the base.css that I’m not catching.

I think @Maximus3 approach is probably the way to go since he’s identified the exact section IDs for your homepage and has more experience with this kind of theme-level CSS.

Just as reference, what worked for me in the Console (applying to all sections, not just one) was this:

const style = document.createElement('style');
style.textContent = `
@keyframes float3d {
  0%, 100% { transform: translateY(0px) rotateX(2deg) rotateY(2deg); }
  25% { transform: translateY(-6px) rotateX(-2deg) rotateY(3deg); }
  50% { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); }
  75% { transform: translateY(-4px) rotateX(-1deg) rotateY(1deg); }
}
.section-resource-list img.product-media__image {
  animation: float3d 4s ease-in-out infinite;
}
`;
document.head.appendChild(style);

Maybe comparing what @Maximus3 suggested with what worked in my Console test helps narrow down the issue

11

If you have problems adding code to Custom CSS because the system is picky about those, instead of editing theme code my recommendation is to use “Custom Liquid” section added to the Footer area

You can paste any CSS code there like this:

<style>
 ... CSS code ...
</style>

This will ultimately be the same as adding code to layouts/theme.liquid
Or Theme settings-> Custom CSS without restrictions.

You would need to target your particular sections yourself though.

However – a better option is to split CSS:

  1. Custom CSS does not accept @keyframes rule.

    So this part we move into “Custom liquid” section as suggested above – add “Custom Liquid” section to the Footer Group with this code:
<style>
@keyframes float3d {
  0%   { transform: translateY(0%); }
  50%  { transform: translateY(-4%); }
  100% { transform: translateY(0%); }
}
</style>
  1. The rest of the code goes into “Custom CSS” of the sections where you want to show the effect – this code will be accepted:
.product-media__image {
  animation: float3d 4s ease-in-out infinite;
  will-change: transform;
}

This way we only use acceptable CSS in “Custom CSS” and therefore we can apply effect only to those sections we need.

And no Code edit.