How can I add a dark to light effect on my product page?

Store Design
, , , ,

Topic summary

Goal: Add a dark-to-light hover effect on product images similar to the linked example.

Key approach (CSS only):

  • Use the CSS filter property to dim images by default (e.g., brightness at 50–90%).
  • On :hover, increase brightness to 100% to reveal original colors. Optionally add a transition for smoothness (~0.3s ease-in-out). No JavaScript needed.

Shopify-specific steps:

  • Go to Online Store > Themes > Actions > Edit code > Assets > main.css.
  • Add CSS targeting your image selector (e.g., the image within a link or a specific class). One example targets swiper-slide images inside anchors, sets a default dim (brightness 90%), and restores to 100% on hover with a transition.

Notes:

  • Ensure the selector matches your theme’s markup (e.g., .your_image_class or .swiper-slide a img).
  • This uses CSS filters, which control visual effects like brightness directly in the browser.

Status: Practical solutions provided; no disagreements. The issue appears resolved with CSS-based hover styling.

Summarized with AI on January 24. AI used: gpt-5.
1

Hello

I want to add a cool effect like the one you will find on this page:

https://partners.no/kontor/holmskau-partners

When you move the mouse over the photos you will see the picture goes from dark to light original color. Anyone who have a clue how to make this effect on my own site? :slightly_smiling_face:

1 Like
2

You can use css like this:

.your_image_class{
filter: brightness(50%);
}

.your_image_class:hover{
filter:brightness(100%);
}
3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > main.css and paste this at the bottom of the file:
.swiper-slide a {
  position: relative;
  display: inline-block;
}
.swiper-slide img {
  transition: filter 0.3s ease-in-out;
  filter: brightness(90%);
}
.swiper-slide a:hover img {
  filter: brightness(100%);
}