Image Enlarger Tool
/* General Reset and Styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
/* Container for the entire tool */
.container {
width: 90%;
max-width: 600px;
text-align: center;
}
/* Title Styling */
.title {
font-size: 2.5rem;
color: #4a90e2;
margin-bottom: 20px;
}
/* File Input Section */
.upload-section {
margin: 20px 0;
}
.image-input {
display: none;
}
label {
background-color: #4a90e2;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
/* Image Preview Section */
.image-preview {
margin: 20px 0;
display: flex;
justify-content: center;
}
.preview-img {
max-width: 100%;
max-height: 250px;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
/* Modal for Enlarged Image */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.modal-content {
max-width: 90%;
max-height: 90%;
margin: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.close {
color: #fff;
font-size: 2rem;
font-weight: bold;
position: absolute;
top: 20px;
right: 30px;
cursor: pointer;
background: none;
border: none;
}
/* Modal Caption */
.modal-caption {
text-align: center;
color: white;
padding-top: 10px;
font-size: 1.2rem;
}
// JavaScript to handle image preview and modal for enlargement
document.getElementById('imageInput').addEventListener('change', previewImage);
function previewImage(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('imagePreview');
img.src = e.target.result;
img.style.display = 'block'; // Show preview image
};
reader.readAsDataURL(file);
}
}
// Function to open the modal with the enlarged image
document.getElementById('imagePreview').addEventListener('click', function() {
const imgSrc = this.src;
if (imgSrc) {
const modal = document.getElementById('enlargedImageModal');
const enlargedImage = document.getElementById('enlargedImage');
enlargedImage.src = imgSrc;
modal.style.display = 'flex';
}
});
// Function to close the modal
function closeModal() {
const modal = document.getElementById('enlargedImageModal');
modal.style.display = 'none';
}
