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

Retired Boards Appdev Extensions

Topic summary

A user is experiencing an issue with Zeno Page Builder where a custom code section with hover effects works correctly in the editor but fails to function on the live website.

The Problem:

  • Custom HTML/CSS code includes an image with overlay and hover effects
  • Background changes on hover in the builder preview
  • Same hover effect does not work on the published site

Technical Details:

  • The code includes an image container with overlay div and content elements
  • CSS transitions are defined for background-color and opacity changes on hover
  • The CSS code appears corrupted or reversed (characters appear backwards in the posted code)

Current Status:

  • Issue remains unresolved
  • User has provided website URL and full code snippets for troubleshooting
  • No responses or solutions have been posted yet

The CSS formatting issues in the posted code may indicate a copy-paste error or encoding problem that could be contributing to the malfunction.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

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

babarazam1_0-1713951992349.png
babarazam1_0-1713951992349.png1362×480 663 KB

website url

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

code is bellow

Default Image

NEW ARRIVALS

Discover

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