Hover over image - Ride Theme

Store Design
1

I am clothing manufacture. I have examples of the shirts we make. It is not a product just and image with text. These are not products they are items i show to the customer so we can manufacture for them.

I would like the customer to be able to see the back of the shirt when they hover over the image. Also how does this work on mobile if possible.

My site

https://2ea0vr-eh.myshopify.com/pages/shirts

2

Hello @BigTeeShirtco

Got it — thanks for the details!

You’re using the Ride theme on Shopify, and on this page (/pages/shirts), you’re showcasing images of shirts you manufacture, not selling products.
You want to show the back of the shirt on hover over the image — basically swap to a second image on hover, just like a product hover effect — but for images with text, not actual products.
You also want to know how this can work on mobile (since there’s no “hover” on mobile).

Here’s the plan:

  1. Set up two images for each shirt (front and back).

  2. Wrap both images inside a container and show/hide the second image on hover with CSS.

  3. On mobile, we’ll make it tap to swap or automatic swap (I’ll explain a few mobile ideas).

I checked your page:
The page is built with Image with Text sections.

We can custom code it slightly to make this happen.

Here’s the fix:
Add this CSS to your theme custom CSS:
(Online Store > Themes > Customize > Theme Settings > Custom CSS)

.hover-image-container {
  position: relative;
  overflow: hidden;
}

.hover-image-container img.hover-back {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hover-image-container:hover img.hover-back {
  opacity: 1;
}

/* Mobile behavior: tap effect */
@media (hover: none) and (pointer: coarse) {
  .hover-image-container img.hover-back {
    opacity: 1;
  }
}

Then update your HTML on the /pages/shirts page like this:
Instead of a normal single image block, you manually insert both front and back images like this:

Replace FRONT-IMAGE-URL and BACK-IMAGE-URL with your actual image links.

On Desktop:
. When customers hover over the shirt, the back image fades in.

On Mobile:
. Because no real hover, the back image will show by default (or we can set up “tap to swap” if you want — but the fade to back image automatically is simplest and cleanest).

Quick Example:
If you had:

Front: https://cdn.shopify.com/s/files/1/…/shirt-front.jpg
Back: https://cdn.shopify.com/s/files/1/…/shirt-back.jpg

Your HTML would be:

Thank you :blush:

3

Hi @BigTeeShirtco ,

Please go to ‘…’ > Edit code > sections > image-with-text.liquid file and send me the whole code, I will check and guide you to change it

4

Hi @BigTeeShirtco

Customized code needed to show the 2nd image in the image with the text section.