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