Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics

How to add overlay color in DP WooCommerce Product image on hover

To apply overlay color on hover in DP WooCommerce product image add the following code of CSS

.dipl_single_woo_product_thumbnail a:after {
position: absolute;
content: “”;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); 
opacity: 0;
transition: all 0.8s;

.dipl_single_woo_product_thumbnail a:hover::after {
opacity: 1;

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous Using Divi Plus with Polylang and multi-lingual plugins
Next No Results Found! on Woo Modules?