Html code not showing up
Hi!
I want to have a similar effect to the zoom box, but with the color overlay coming from the left, instead of simply appearing and zooming in. I don't think that is possible with any of the available elements, so I tried to make it happen with html.
It works, because I see it on the BeBuilder, but when I view the page, it doesn't show up. If I go back to the BeBuilder and refresh, it disappears there as well.
What could be happening?
This is my website: http://test.dinascience.com/index.php/dina-science/equipo/
Comments
Hi,
Please provide a code you try to use, and I will check it.
Thanks
Hi, here it is, I have pasted it in two comments because if not, it blocks me. First part:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.overlay-container {
position: relative;
width: 100%;
overflow: hidden;
}
.image {
width: 100%;
display: block;
}
.overlay {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(56,64,106,0.66);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
transition: left 0.5s ease-in-out;
}
.overlay-container:hover .overlay {
left: 0;
}
.overlay h3 {
font-size: 18px;
margin: 0;
color: white;
}
.overlay p {
font-size: 15px;
margin: 5px 0;
color: white;
}
.overlay a {
font-size: 15px;
text-decoration: underline;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="overlay-container">
<img src="http://test.dinascience.com/wp-content/uploads/2025/03/unnamed.png" alt="Mireia Sanalinas" class="image">
<div class="overlay">
<h3>Mireia Sanalinas</h3>
<p>Bióloga, Co-fundadora de DiNA Science</p>
<a href="#" onclick="openPopup()">Saber más</a>
</div>
</div>
<script>
function openPopup() {
document.querySelector("#mfn-popup-template-126").style.display = "block";
}
</script>
</body>
</html>
Everything before the <style> tag is unnecessary (including closing tags at the end), as every page should have only one tag <html>, <body>, or <head>, and they already exist on every created page.
Moreover, you are using very basic classes names like "image" or "overlay". If you want to create a custom structure you should use more specific classes like "myOwn-image", "myOwn-overlay", so the will not affect other elements on the website by accident.
Also, no script for popup opening is necessary as there is already an option to achieve that. See the following video tutorial:
https://support.muffingroup.com/video-tutorials/open-popup-on-link-click/
Best regards
Thank you for your support. I have done what you suggested (I think), but the issue remains. I can see the block working on the bebuilder, but not on the live website, and once I refresh the bebuilder it's gone as well.
Here is the code I am using now:
<!DOCTYPE html>
<style>
.myOwn-overlay-container {
position: relative;
width: 100%;
overflow: hidden;
}
.myOwn-image {
width: 100%;
display: block;
}
.myOwn-overlay {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(56,64,106,0.66);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
transition: left 0.5s ease-in-out;
}
.myOwn-overlay-container:hover .myOwn-overlay {
left: 0;
}
.myOwn-overlay h3 {
font-size: 18px;
margin: 0;
color: white;
}
.myOwn-overlay p {
font-size: 15px;
margin: 5px 0;
color: white;
}
.myOwn-overlay a {
font-size: 15px;
text-decoration: underline;
color: white;
cursor: pointer;
}
</style>
<div class="myOwn-overlay-container">
<img src="http://test.dinascience.com/wp-content/uploads/2025/03/unnamed.png" alt="Mireia Sanalinas" class="myOwn-image">
<div class="myOwn-overlay">
<h3>Mireia Sanalinas</h3>
<p>Bióloga, Co-fundadora de DiNA Science</p>
<a href="#" class="open-mfn-popup" data-mfnpopup="mfn-popup-template-126">Saber más</a>
</div>
</div>
Please send us the WordPress dashboard and FTP access privately through the contact form, which is on the right side at https://themeforest.net/user/muffingroup#contact and we will check what might be the reason.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please ensure that the data you send are complete and correct.
Thanks
Outdated Betheme was the root cause.
After I updated it to the newest version, it worked correctly.
Best regards
Great! Thank you so much!!
Hi, sorry, but one issue seems to persist:
I can't make the popups appear. I have followed the tutorial linked above to open popups by creating a link, and still, I keep getting this message:
I have checked the popup ID, set it to "entire site" and also tried to set page pop-up specifically, but it still won't open.
Thank you in advance!
You must add # into the popup name:
Best regards
Oops yeah, such an easy fix! Thank you so much for your quick help!