Said Mounaim's Blog
Image Reveal Animation with HTML, CSS, and GSAP

Image Reveal Animation with HTML, CSS, and GSAP

Said Mounaim's photo
Said Mounaim
·

3 min read

This article demonstrates a simple image reveal animation when hovering over items. The HTML code represents a section with works, including images and titles. The CSS code provides the necessary styling for the layout and animation. The JavaScript code utilizes the GSAP library to create the image reveal effect on hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Reveal Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="works">
    <div class="container-works">
      <div class="content-works">
        <div class="header-works">
          <h3>Recent Work</h3>
        </div>

        <div id="gallery-work">
          <div id="work-images">
            <div class="work-image" style="background-image: url('https://images.pexels.com/photos/14696910/pexels-photo-14696910.jpeg');"></div>
            <div class="work-image" style="background-image: url('https://images.pexels.com/photos/8969179/pexels-photo-8969179.jpeg');"></div>
            <div class="work-image" style="background-image: url('https://images.pexels.com/photos/16677943/pexels-photo-16677943.jpeg');"></div>
          </div>
        </div>

        <div class="items-works">
          <div class="grid-works">
            <div class="item-work">
              <div class="title">
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
              </div>
            </div>

            <div class="item-work">
              <div class="title">
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
              </div>
            </div>

            <div class="item-work">
              <div class="title">
                <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

body {
  font-family: "Lucida Sans";
  background-color: #000;
}

.works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 250px;
  position: relative;
}

.works .container-works {
  width: 1200px;
  max-width: 100%;
  padding: 0 15px;
  margin: auto;
}

.works .content-works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.works .header-works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-bottom: 35px;
  border-bottom: 1px solid #ffffff;
}

.works .header-works h3 {
  font-size: 26px;
  color: #fff;
}

.works #gallery-work {
  position: fixed;
  width: 385px;
  height: 280px;
  transform: translateY(-50%, 50%);
  z-index: 999;
  overflow: hidden;
  pointer-events: none;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
}

.works #work-images {
  width: 100%;
  height: calc(280px * 3);
  display: flex;
  flex-direction: column;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 2s;
}

.works .work-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.works .grid-works {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.works .grid-works .item-work {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 40px 0;
  border-bottom: 1px solid #fff;
  opacity: 0.6;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.works .grid-works .item-work .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.works .grid-works .item-work:hover {
  opacity: 1;
}

.works .grid-works .item-work h4 {
  font-size: 26px;
  line-height: 40px;
  color: #fff;
}

const elementsWorks = document.querySelectorAll(".item-work");
const slidePicWorks = document.querySelector("#gallery-work");
const slidePicsWorks = document.querySelector("#work-images");

gsap.set(slidePicWorks, { autoAlpha: 0 });

elementsWorks.forEach((element, index) => {
  element.addEventListener("mouseenter", function () {
    gsap.to(slidePicsWorks, {
      marginTop: `-${280 * index}px`,
      duration: 0.2,
      ease: "power1",
    });
  });

  element.addEventListener("mouseleave", function () {
    gsap.to(element, { color: "initial", duration: 0.2, ease: "power1" });
  });
});

window.addEventListener("mousemove", function (e) {
  gsap.to(slidePicWorks, {
    top: `${e.clientY}px`,
    left: `${e.clientX}px`,
    xPercent: -20,
    yPercent: -45,
    duration: 0.2,
    ease: "power1",
  });
});

document
  .querySelector(".items-works")
  .addEventListener("mouseenter", function () {
    gsap.to(slidePicWorks, {
      autoAlpha: 1,
      duration: 0.2,
      ease: "power1",
    });
  });

document
  .querySelector(".items-works")
  .addEventListener("mouseleave", function () {
    gsap.to(slidePicWorks, {
      autoAlpha: 0,
      duration: 0.2,
      ease: "power1",
    });
  });

If you find It useful don't forget to Like and Follow for more.

HTML5CSS3JavaScriptGSAP