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.
CODE
<!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>
CODE
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;
}
CODE
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.
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR