CSS Modal Images Tutorial

Modal images are an excellent way to enhance user experience on websites. They create a focused view for images, allowing users to expand and view them in detail without leaving the page. In this tutorial, we will go through the process of creating a responsive CSS modal image gallery step by step, which is perfect for beginners.

I. Introduction

A. Overview of modal images

A modal image is an image that opens in a modal or pop-up window, usually displaying a larger version of the image along with additional information or functionality. It overlays the current page, allowing users to focus on the image content while still keeping the context of where they came from.

B. Use cases for modal images

Some common use cases for modal images include:

Image galleries
Product displays on e-commerce sites
Tutorials featuring screenshots or detailed images
Presentations requiring enlarged visuals

II. How to Create a Modal Image

A. HTML structure

To create a modal image, we start with the HTML structure. Below is a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>CSS Modal Image Tutorial</title>
</head>
<body>

    <div class="modal">
        <span class="close">×</span>
        <img class="modal-content" id="modalImg">
        <div id="caption"></div>
    </div>

    <img src="thumbnail1.jpg" alt="Thumbnail 1" class="thumbnail" onclick="openModal(this)">
    <img src="thumbnail2.jpg" alt="Thumbnail 2" class="thumbnail" onclick="openModal(this)">

</body>
</html>

1. Image thumbnail

The code above contains a thumbnail image that is clickable. The modal is initially hidden and will display when an image thumbnail is clicked.

2. Modal structure

The modal structure consists of a container that holds the enlarged image and a close button. The close button is represented by the “×” symbol.

B. CSS styling

Next, we apply some CSS styling to make our modal visually appealing.

body {
    font-family: Arial, sans-serif;
}

.thumbnail {
    width: 150px;
    cursor: pointer;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0, 0, 0, 0.9); 
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%; 
    max-width: 700px; 
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

1. Modal background

The modal background is styled with a semi-transparent black color using the rgba function, allowing the page behind to be visible but dimmed.

2. Image styles

The enlarged modal image is styled to take up 80% of the screen width while maintaining responsiveness.

3. Close button styles

The close button is set to the upper right corner of the modal and changes color when hovered over, enhancing user interaction.

III. How to Open the Modal

A. JavaScript function to open the modal

We need a JavaScript function to open the modal when an image is clicked:

function openModal(img) {
    var modal = document.getElementsByClassName("modal")[0];
    var modalImg = document.getElementById("modalImg");
    var captionText = document.getElementById("caption");
    
    modal.style.display = "block";
    modalImg.src = img.src;
    captionText.innerHTML = img.alt;
}

B. Event listeners for image clicks

The images have an onclick attribute that calls the openModal function with “this” as an argument, allowing us to pass the clicked image to our function.

IV. How to Close the Modal

A. JavaScript function to close the modal

To effectively close the modal, we need another function:

function closeModal() {
    var modal = document.getElementsByClassName("modal")[0];
    modal.style.display = "none";
}

B. Close button functionality

We can attach the closeModal function to the close button in our HTML:

document.getElementsByClassName("close")[0].onclick = function() {
    closeModal();
};

C. Close modal on external click

Additionally, we should allow users to close the modal by clicking outside the image:

modal.onclick = function(event) {
    if (event.target != modalImg) {
        closeModal();
    }
};

V. Conclusion

A. Summary of key points

In this tutorial, you learned how to create a modal image using simple HTML, CSS, and JavaScript. We went through the basic structure, styles, and functionality required to open and close a modal effectively.

B. Encouragement to customize and experiment with modal images

Feel free to customize the styles or add more features such as transitions or captions to enhance your modal images. Experimenting is a great way to learn and create unique components for your website.

FAQ Section

Question	Answer
What is a modal image?	A modal image is an image that opens in a pop-up style window to provide a larger view.
Can I use this for video?	Yes, you can repurpose the modal structure for videos or other content types.
Is this responsive?	Yes, the modal images are designed to be responsive based on the screen size.
Do I need to use JavaScript?	Yes, JavaScript is necessary to handle the opening and closing of the modal.

askthedev.com Latest Articles