Hello
I am using Debut theme and I would like to change way of working of my collection (I think there is simple solution but I am lost in my css) ![]()
So when picture it is normal…0 I would like to has it without any opacity 0% (just 100% image).
And when the cursor is over, then the (picture) turns a bit gray (opacity turns to 70%).
Thank you in advance
Topic summary
Request: Adjust collection images in the Debut theme so that images display at full opacity (100%) by default and become slightly gray on hover (reduce opacity to ~70%). The user is looking for a simple CSS-based solution.
Guidance provided:
- An official responder could not supply custom code but suggested two paths:
• Hire a developer via the Shopify Experts directory for a modest, targeted change.
• Consult an older forum post that includes code for adding a hover effect to collection images (external link provided). - Best practice: Duplicate the theme before editing code to maintain a safe fallback.
Status/outcome: No direct CSS snippet was provided in this thread. Action items are to review the linked hover-effect code and/or engage a Shopify Expert. The question remains open pending an in-thread code solution or user implementation from the linked resource.
Notes: “Opacity” refers to the CSS property controlling transparency; a hover effect changes styling when the cursor is over an element.
Hey, @glogana
Thanks for asking your question in our design forum. This is the place to go when it comes to coding advice where you can hopefully have someone with insight regarding your particular request provide you with the necessary code. With that said, I am not formally trained in code to be able to assist you directly but I just wanted to leave a valuable alternative solution if you are unable to get an answer in the near future. Shopify has an experts platform that allows you to find and hire a developer for small and large coding gigs. With the help of an expert, they could definitely help you do this at a modest cost. If you would like to learn more, feel free to check out our Shopify experts directory.
Alternatively, if you want to try to make the coding changes yourself, I was able to find an older forums post that has some provided code on adding a hover effect to collection images here. Feel free to check that out. Also, be sure to duplicate your theme before making any changes to the theme code. That way, if something accidentally breaks, you have a working version of your theme to fall back onto.
If there is anything else I can help you with, please let me know.