Lightbox Using HTML CSS and JavaScripts

HTML

CSS

Output

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightbox Using HTML CSS and JavaScripts</title>

</head>
<body>
    <h2 style="text-align:center">Lightbox Using HTML CSS and JavaScripts</h2>

<div id="mymodalAreaEle" class="modalAreaEle">
        <span class="close cursor" onclick="closemodalAreaEle()">&times;</span>
        <div class="modalAreaEle-content">

<div class="mySlideDivClass">
                <div class="numbertext">Picture 1</div>
                <img src="https://www.teknowize.com/attachments/file_1663001343.jpg" style="width:100%">
            </div>

<div class="mySlideDivClass">
                <div class="numbertext">Picture 2</div>
                <img src="https://www.teknowize.com/attachments/file_1663001394.jpg" style="width:100%">
            </div>

<div class="mySlideDivClass">
                <div class="numbertext">Picture 3</div>
                <img src="https://www.teknowize.com/attachments/file_1663001426.jpg" style="width:100%">
            </div>

<div class="mySlideDivClass">
                <div class="numbertext">Picture 4</div>
                <img src="https://www.teknowize.com/attachments/file_1663001444.jpg" style="width:100%">
            </div>

</body>
</html>

CSS

.row>.imagesMainDiv {
            padding: 0;
        }
    
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
    
        .imagesMainDiv {
            float: left;
            width: 25%;
        }
    
        .modalAreaEle {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: black;
        }
    
        .modalAreaEle-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            width: 90%;
            max-width: 1200px;
        }
    
        .close {
            color: white;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
        }
    
        .close:hover,
        .close:focus {
            color: #999;
            text-decoration: none;
            cursor: pointer;
        }
    
        .mySlideDivClass {
            display: none;
        }
    
        .cursor {
            cursor: pointer;
        }
    
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -50px;
            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;
        }
    
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
    
        .prev:hover,
        .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }
    
        img {
            margin-bottom: -4px;
        }
    
        .captionMainContainer {
            text-align: center;
            background-color: black;
            padding: 2px 16px;
            color: white;
        }
    
        .imageBottom {
            opacity: 0.6;
        }
    
        .active,
        .imageBottom:hover {
            opacity: 1;
        }
    
        img.shadowOnHover {
            transition: 0.3s;
        }
    
        .shadowOnHover:hover {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

JS

function openmodalAreaEle() {
            document.getElementById("mymodalAreaEle").style.display = "block";
        }

function closemodalAreaEle() {
            document.getElementById("mymodalAreaEle").style.display = "none";
        }

var slideIndex = 1;
        showSlides(slideIndex);

function plusSlides(n) {
            showSlides(slideIndex += n);
        }

function currentSlide(n) {
            showSlides(slideIndex = n);
        }

Ui Code Snippets

Lightbox Using HTML CSS and JavaScripts

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Lightbox Using HTML CSS and JavaScripts

HTML

CSS

JS

Output

Network Marketing

SEO Course