how to code image with popup text and disappear if click again and with a button redirecting to specific site and manual slideshow. I’m using hostinger web builder.
(I don’t have a laptop/desktop i only use Android phone)
Toggle Text with Responsive Image and Button
/* Start with mobile styles as the default for the responsive image */
img.responsive-image {
width: 100%; /* Make image expand to the width of its container */
height: auto; /* Set image height to auto to maintain aspect ratio */
display: block; /* Eliminate any white space below the image */
margin: 0 auto; /* Center the image within its container */
cursor: pointer; /* Indicates it’s clickable */
}
/* For larger screens, you can set specific styles */
@media only screen and (min-width: 768px) {
img.responsive-image {
width: 50%; /* Adjust the width to fit properly on larger screens */
}
}
#overlay {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
padding-top: 100px;
}
#overlayContent {
background-color: #fff;
margin: auto;
padding: 20px;
width: 80%;
max-width: 600px;
border-radius: 5px;
text-align: center;
position: relative;
box-sizing: border-box;
}
.redirect-button {
display: block; /* Makes the button a block element */
margin: 20px auto 0 auto; /* Centrally aligns the button */
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-decoration: none; /* Removes underline from text */
}
.redirect-button:hover {
background-color: #0056b3;
}
<img src=”https://assets.zyrosite.com/A3QpnXPBg9UDZKKK/images-15-AMqnPq9eRNT44axO.jpeg”
alt="Toggle Popup"
class="responsive-image"
onclick="toggleOverlay()"/>
<p>When a Delta Force team is ambushed in enemy territory, a rookie officer refuses to abandon them. Their only hope lies with an Air Force drone pilot as the eyes in the sky during a brutal 48-hour battle for survival.</p>
<a href="https://pastepeso.com/0vynlpjv"
target="_blank"
class="redirect-button">CLICK HERE TO DOWNLOAD</a>
function toggleOverlay() {
var overlay = document.getElementById(“overlay”);
// Toggle visibility
overlay.style.display = overlay.style.display === ‘block’ ? ‘none’ : ‘block’;
}