Title: Storefront opacity hover effect Last modified: August 30, 2016 --- # Storefront opacity hover effect * Resolved [mepmep](https://wordpress.org/support/users/mepmep/) * (@mepmep) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/) * Hi. * Im using storefront theme (With child theme) for woocommerce and I would like to have a simple “light up” hover effect on shop/category thumbs. * But I can’t seem to get it right. * I tried a lot of snippets i found searching for a solution like * ``` .images .thumbnails a img:hover {opacity:0.5} ``` * Im thinking it should be pretty simple pice of css Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/storefront-opacity-hover-effect/page/2/?output_format=md) [→](https://wordpress.org/support/topic/storefront-opacity-hover-effect/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723271) * You need to show us the page in question * Thread Starter [mepmep](https://wordpress.org/support/users/mepmep/) * (@mepmep) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723274) * Oh yes of course 🙂 * [http://www.darwinogdodo.dk](http://www.darwinogdodo.dk) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723277) * What do you mean by light-up effect? It seems they are already at their maximum brightness * [Listic](https://wordpress.org/support/users/listic/) * (@listic) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723279) * Thanks for taking your time Andrew. * What I keen is a hover effect like you see here: [http://www.dessign.net/modernshoptheme/product-category/accessories/](http://www.dessign.net/modernshoptheme/product-category/accessories/) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723282) * If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following: 1. Install this Custom CSS Manager plugin [http://wordpress.org/plugins/custom-css-manager-plugin](http://wordpress.org/plugins/custom-css-manager-plugin) 2. use its “CSS Code” section of the dashboard to hold your CSS modifications: 3. (put this code in) 4. ``` .woocommerce .product a { position: relative; display: block; } .woocommerce .product a:hover:before, .woocommerce .product a:focus:before { background: rgba(255, 255, 255, 0.5); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } ``` 5. Save * _Alternatively use your Child Theme style.css file to hold your CSS modifications_ * [Listic](https://wordpress.org/support/users/listic/) * (@listic) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723284) * Thanks allot Andrew. * I am using a child theme. * Tried adding your code to the child style.css But nothing changed. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723285) * Your child theme contains a syntax error: * ``` a img { border: 5px solid #F7F7F7; ``` * Make sure you close that style off. * [Listic](https://wordpress.org/support/users/listic/) * (@listic) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723286) * Ahh THANKS 😀 * That was it! Now it works perfectly. * Again thanks allot for your help. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723289) * You’re welcome 🙂 * [Listic](https://wordpress.org/support/users/listic/) * (@listic) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723325) * Hey again Andrew. * I just noticed that it also effects the images on the product pages ( [http://darwinogdodo.dk/shop/plakater/fugle/3-x-spurv/](http://darwinogdodo.dk/shop/plakater/fugle/3-x-spurv/)) and not just the thumbs on Home/Shop/categories * So I will have to define that only affecting the thumbs right? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723331) * Try this code instead: * ``` .woocommerce .product a { position: relative; display: block; } .woocommerce .product a:hover:before, .woocommerce .product a:focus:before { background: rgba(255, 255, 255, 0.5); content: ''; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .single .woocommerce .product a:hover:before, .single .woocommerce .product a:focus:before { background: none; } ``` * [Listic](https://wordpress.org/support/users/listic/) * (@listic) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723334) * Still the same but thanks for helping me this much. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723347) * Oops try this: * ``` .single.woocommerce .product a:hover:before, .single.woocommerce .product a:focus:before { background: none; } ``` * [Listic](https://wordpress.org/support/users/listic/) * (@listic) * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723372) * Thanks for hanging in there 🙂 But that dossent seem to change anything. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/#post-6723374) * Clear your browser’s cache and try again – I cannot replicate the problem. Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/storefront-opacity-hover-effect/page/2/?output_format=md) [→](https://wordpress.org/support/topic/storefront-opacity-hover-effect/page/2/?output_format=md) The topic ‘Storefront opacity hover effect’ is closed to new replies. * 16 replies * 3 participants * Last reply from: [Listic](https://wordpress.org/support/users/listic/) * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/storefront-opacity-hover-effect/page/2/#post-6723389) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics