Removing image opacity while hovering over an image creates a cleaner and more modern look, as overly opaque images can feel dated and cluttered. It allows users to see the full image without any obstructions, quite important when showcasing a product or service.
How to Remove Image Opacity on Hover
STEP 1
In Shopify admin, click on Online Store to reveal themes.
STEP 2
Select your Debutify Shopify theme and click Customize.
STEP 3
Click on the Theme Settings icon.
STEP 4
Click on Custom Style/Script (Custom CSS).
STEP 5
Add the following CSS.
.image-link:hover, .grid-product__image-link:hover{
opacity:1;
}
STEP 6
Click Save to apply the changes.
