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