zeno bulder custome code section background is not changing on hover live website working on editor

[babarazam1]

i am editing my site with zeno page bulder i add a custom code section and add code when i hover on it the background change on bulder but on live site its not changing

website url

https://da41f8-b2.myshopify.com/

code is bellow

<div class="custom-hover-effect">
<div class="image-container">
<img src="https://media.zenobuilder.com/upload/sp-15622/new-arrivals-13528818.jpg" alt="Default Image">
<div class="overlay"></div>
<div class="content">
<p>NEW ARRIVALS</p>
<a href="https://da41f8-b2.myshopify.com/collections/new-arrivals" class="btn">Discover</a>
</div>
</div>
</div>

css is

p {
color: white;
font-size: 25px;
font-weight: bold;
}
.custom-hover-effect {
position: relative;
display: inline-block;
}

.image-container {
position: relative;
overflow: hidden;
}

.image-container img {
max-width: 100%;
display: block;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.3s ease;
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
transition: opacity 0.3s ease;
}

.custom-hover-effect:hover .overlay {
background-color: rgba(0, 0, 0, 1) !important;
}

.custom-hover-effect:hover .content p {
display: none;
}

.custom-hover-effect:hover .btn {
display: inline-block;
}

.btn {
display: none;
padding: 10px 20px;
border: 1px solid white;
color: white;
text-decoration: none;

transition: background-color 0.3s ease, color 0.3s ease;
}