Image + Cap
<!-- IMAGE WITH TAP CAPTION -->
<div style="display:flex; justify-content:center; margin-bottom:15px;">
<div class="img-box"
onclick="toggleCaption(this)"
style="position:relative; max-width:600px; width:100%;">
<img src="IMAGE_URL_1.jpg"
alt="Image"
style="width:100%; height:auto;
border-radius:10px;
box-shadow:5px 5px 15px rgba(0,0,0,0.3);
display:block;
cursor:pointer;">
<div class="img-caption"
style="position:absolute;
left:0; right:0; bottom:0;
margin:10px;
background:rgba(0,0,0,0.65);
color:#fff;
padding:8px 10px;
font-size:14px;
text-align:center;
border-radius:8px;
display:none;">
📌 Caption for Image 1
</div>
</div>
</div>
<!-- COPY ABOVE BLOCK FOR NEXT IMAGE -->
<div style="display:flex; justify-content:center; margin-bottom:15px;">
<div class="img-box"
onclick="toggleCaption(this)"
style="position:relative; max-width:600px; width:100%;">
<img src="IMAGE_URL_2.jpg"
alt="Image"
style="width:100%; height:auto;
border-radius:10px;
box-shadow:5px 5px 15px rgba(0,0,0,0.3);
display:block;
cursor:pointer;">
<div class="img-caption"
style="position:absolute;
left:0; right:0; bottom:0;
margin:10px;
background:rgba(0,0,0,0.65);
color:#fff;
padding:8px 10px;
font-size:14px;
text-align:center;
border-radius:8px;
display:none;">
📌 Caption for Image 2
</div>
</div>
</div>
<!-- SCRIPT (ADD ONLY ONCE) -->
<script>
function toggleCaption(box) {
const caption = box.querySelector(".img-caption");
caption.style.display =
(caption.style.display === "none" || caption.style.display === "")
? "block"
: "none";
}
</script>
Comments
Post a Comment