dev-resources.site

for different kinds of informations.

Image Reveal Animation with HTML, CSS, and GSAP

Published at

11/14/2024

Categories

4 categories in total

Author

11 person written this

saidmounaim

open

Image Reveal Animation with HTML, CSS, and GSAP

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.

gsap Article's

30 articles in total

How to improve the Frontend part of the project using one button as an example :))))