Okay, let's create an interactive image component with enlarge functionality and navigation arrows. We'll use HTML, CSS, and JavaScript. This setup will provide a single image that enlarges into a modal overlay when clicked. The arrows will be present in the overlay but won't cycle images yet, as we only have one image defined. Enlargeable Image

Click the Image

body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; } h1 { text-align: center; color: #333; } .image-container { text-align: center; margin-top: 30px; } .thumbnail { border-radius: 5px; cursor: pointer; transition: 0.3s; max-width: 100%; height: auto; } .thumbnail:hover { opacity: 0.7; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; animation-name: zoom; animation-duration: 0.6s; } /* Add Animation */ @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; /* Adjust based on your content */ color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; background-color: rgba(0,0,0,0.3); } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } .prev { left: 0; border-radius: 0 3px 3px 0; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; /* Adjust as needed */ } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } .prev, .next { font-size: 16px; padding: 12px; } } // Get the modal const modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption const img = document.getElementById("myImage"); const modalImg = document.getElementById("img01"); const captionText = document.getElementById("caption"); const prevBtn = document.querySelector(".prev"); const nextBtn = document.querySelector(".next"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; // Use the clicked image's src captionText.innerHTML = this.alt; // Use the clicked image's alt text } // Get the element that closes the modal const span = document.getElementsByClassName("close")[0]; // When the user clicks on (x), close the modal span.onclick = function() { modal.style.display = "none"; } // Optional: Close modal when clicking outside the image modal.onclick = function(event) { // Check if the click target is the modal background itself (not the image or buttons) if (event.target === modal) { modal.style.display = "none"; } } // --- Arrow Functionality Placeholder --- // Currently, these buttons don't do anything as there's only one image. // You would add logic here to change modalImg.src and captionText.innerHTML // based on an array of images if you were building a gallery. prevBtn.onclick = function(event) { event.stopPropagation(); // Prevent modal background click event console.log("Previous button clicked"); // Add logic here to show the previous image in a gallery alert("Previous button clicked - functionality not implemented yet."); } nextBtn.onclick = function(event) { event.stopPropagation(); // Prevent modal background click event console.log("Next button clicked"); // Add logic here to show the next image in a gallery alert("Next button clicked - functionality not implemented yet."); } Click the placeholder image. It will open in a larger view within a modal overlay. You'll see the close button (X) and the left/right arrows. Clicking the arrows currently shows an alert, as their specific function (like cycling through images) needs further definition or more images to be added.