This code is very suitable for websites that have images next to each other and want these images to have an effect at the same time and be displayed as a gallery. In this code, the images are in color in normal mode. By placing the mouse cursor on each of them, these images zoom in a bit. At the same time, the mouse icon changes and the phrase exploration is displayed next to the mouse cursor. Clicking on any image will display the image in full screen. There are also arrows on the left and right of the image to display other images.


HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script>
<div class="gallery">
  <div class="full">
    <img class="fullImg" src="" />
    <div class="prev"> &#x2190 </div>
    <div class="next"> &#x2192 </div>    
  </div>
  <div class="follower">
    <p class="txt1">Explore</p>
    <p class="txt2">Close</p>    
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

CSS
html, body, .full {
  width:100%;
  height:100%; 
  font-size:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}
.gallery {
  opacity:0;
  text-align:center;
  background-color:#fff;
  min-height:100vh;
}
.box {
  cursor:pointer;
  position:relative;
  display:inline-block;
  width:200px;
  height:300px;
  margin:75px;
  overflow:hidden;
}
.follower {
  cursor:pointer;
  pointer-events:none;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.75);
  width:90px;
  height:90px;
  border-radius:50%;
  z-index:1000;
}
.follower p {
  color:#fff;
  font-size:15px;
  text-align:center;
  line-height:0;
  letter-spacing:0.5px;
  margin-top:50%;
  user-select:none;
}
.follower .txt2 {
  display:none;
}
.full {
  position:fixed;
  top:0;
  display:none;
  background:#fff;
  z-index:100;
}
.fullImg {
  pointer-events:none;
  position:absolute;
  max-width:90%;
  max-height:90%;
  top:50%;
  left:50%;    
  transform:translate(-50%, -50%);
}
.prev, .next {
  cursor:pointer;
  background-color:#ddd;
  color:#fff;
  font-size:30px;
  line-height:0;
  position:absolute;  
  width:100px;
  height:50px;
  top:50%;
  transform:translateY(-50%);
  padding-top:50px;
}
.next {
  right:0;
}
Javascript
let current = "",
    imgArr = [];
for (let i = 0; i < 6; i++) {
    const img = document.createElement("img"),
        box = document.createElement("div");
    img.draggable = false;
    img.src = "https://picsum.photos/id/" + (i + 50) + "/400/600";
    imgArr.push(img.src);
    gsap.set(img, { attr: { class: "img" }, width: 200, height: 300 });
    gsap.set(box, { attr: { class: "box", id: "box" + i } });
    box.appendChild(img);
    $(".gallery").append(box);
}
gsap.set(".follower", { scale: 0 });
gsap.set(".gallery", { opacity: 1 });
$(".gallery").on("mousemove", (e) => {
    gsap.to(".follower", {
        duration: 0.3,
        x: e.clientX - 45,
        y: e.clientY - 53
    });
});
$(".box").on("mouseover", (e) => {
    if (gsap.isTweening(".full")) return;
    const box = e.currentTarget,
        img = box.firstChild;
    gsap.to(".follower", { duration: 0.2, scale: 1 });
    gsap.to(".gallery", {
        duration: 1,
        ease: "power2.inOut",
        backgroundColor: "#ddd"
    });
    gsap.to(".box", {
        opacity: (i, t) => (t == box ? 1 : 0.3),
        ease: 'power1.inOut'
    });
    gsap.to(img, { scale: 1.1, duration: 6, ease: "expo" });
    //smoothes jitters in FF
    gsap.to(img, {
        rotation: 0.05,
        yoyo: true,
        repeat: 5,
        duration: 1,
        ease: 'none'
    });
});
$(".box").on("mouseout", (e) => {
    if (current === "") {
        gsap.to(".follower", {
            duration: 0.15,
            ease: "power1.in",
            scale: 0
        });
    }
    gsap.to(".gallery", {
        duration: 1,
        backgroundColor: "#fff"
    });
    gsap.to(".img", { scale: 1, overwrite: true, duration: 0.3 });
    gsap.to(".box", { opacity: 1, ease: "power1.inOut" });
});
$(".box").on("click", (e) => {
    if (gsap.isTweening(".full")) return;
    current = Number(e.currentTarget.id.substr(3));
    gsap
        .timeline()
        .set(".fullImg", { attr: { src: imgArr[current] } })
        .set(".full", { display: "block" })
        .fromTo(".full", { y: "100vh" }, { duration: 0.6, y: 0, ease: "expo.inOut" })
        .fromTo(".fullImg", { opacity: 0 }, { duration: 0.4, opacity: 1, ease: "sine.inOut" }, 0.4)
        .fromTo(".prev", { x: -100 }, { duration: 0.6, x: 0, ease: "power4" }, 0.4)
        .fromTo(".next", { x: 100 }, { duration: 0.6, x: 0, ease: "power4" }, 0.4);
    gsap
        .timeline({ defaults: { duration: 0.25, ease: "power1.inOut" } })
        .to(".txt1", { opacity: 0 })
        .set(".txt1", { display: "none" })
        .set(".txt2", { display: "block", opacity: 0 })
        .to(".txt2", { opacity: 1 });
});
$(".full").on("click", (e) => {
    if (gsap.isTweening(".full")) return;
    if ($(e.target).hasClass("prev") || $(e.target).hasClass("next")) return;
    current = "";
    gsap.timeline()
        .to(".follower", { duration: 0.15, ease: "power1.in", scale: 0 }, 0)
        .to(".prev", { duration: 0.2, ease: "power1.in", x: -100 }, 0)
        .to(".next", { duration: 0.2, ease: "power1.in", x: 100 }, 0)
        .to(".fullImg", { duration: 0.4, opacity: 0, ease: "sine.inOut" }, 0)
        .to(".full", { duration: 0.4, y: "-100vh", ease: "power3.in" }, 0.3)
        .fromTo(".gallery", { backgroundColor: '#ccc' }, { duration: 0.5, backgroundColor: "#fff", ease: "power2.inOut" }, 0.5)
        .fromTo(".box", { opacity: 0 }, { duration: 0.3, opacity: 1, ease: "sine.inOut" }, 0.6)
    gsap.timeline({ defaults: { duration: 0.25, ease: "power1.inOut" } })
        .to(".txt2", { opacity: 0 })
        .set(".txt2", { display: "none" })
        .set(".txt1", { display: "block", opacity: 0 })
        .to(".txt1", { opacity: 1 });
});
$(".prev, .next").on("mouseover", (e) => {
    gsap.to(".follower", {
        duration: 0.15,
        scale: 0
    });
    gsap.to(e.currentTarget, {
        duration: 0.3,
        backgroundColor: "#eee",
        color: "#aaa"
    });
});
$(".prev, .next").on("mouseout", (e) => {
    gsap.to(".follower", {
        duration: 0.15,
        scale: 1
    });
    gsap.to(e.currentTarget, {
        duration: 0.6,
        backgroundColor: "#ddd",
        color: "#fff"
    });
});
$(".prev, .next").on("click", (e) => {
    if (gsap.isTweening(".fullImg")) return;

    if ($(e.target).hasClass("prev")) {
        (current > 0) ? current-- : current = imgArr.length - 1;
    }
    if ($(e.target).hasClass("next")) {
        (current >= imgArr.length - 1) ? current = 0 : current++;
    }
    gsap.timeline()
        .to(".fullImg", { duration: 0.3, opacity: 0, ease: "sine.inOut" }, 0)
        .set(".fullImg", { attr: { src: imgArr[current] } })
    $('.fullImg').on('load', (e) => {
        $('.fullImg').off('load');
        gsap.fromTo(".fullImg", { opacity: 0 }, { duration: 0.4, opacity: 1, ease: "sine.inOut" });
    })
});

 Previous

HTML Thumbnail Image with Auto Scroll

The thumbnails in this post move up and down automatically. These thumbnails have no effect on hover time and are only constantly moving.

HTML Thumbnail Image with Auto Scroll
CSS Thumbnail with Caption Revealing on . . .

CSS Thumbnail with Caption Revealing on . . .

In this post, we have some thumbnails together. These images disappear during the hover and the title below them is displayed in white with animation.

  Next