How to apply hover effect to product shop

Hi, I used a code by divi to apply to my woocommerce product shop so when you hover over it it displays “view” over it. I need to apply that same effect to category and tag pages. It applies to every other page but tag and category pages. Below is the code and page I used to add the hover effect. Below is an example of what I am looking for.
https://prnt.sc/rjezsu

https://www.elegantthemes.com/blog/divi-resources/how-to-style-a-woocommerce-product-to-show-text-instead-of-an-icon-on-hover-in-divi

.woocommerce .et_overlay:before {
left: 0;
margin-left: 0;
content: ‘view’;
/*** YOUR TEXT ***/
font-family: ‘Source Sans Pro’, Arial !important;
/*** YOUR CHOSEN FONT FAMILY ***/
text-transform: uppercase;
font-size: 24px;
color: #fff;
/*** COLOR OF YOUR TEXT ***/
font-weight: bold;
text-align: center;
width: 100%;
padding: 5px 0;
}