Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

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.