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;
}

Table of Contents