Video Hover Animation

index.html

@@ -169,6 +169,13 @@ <h2>
         <div id="videoContainerDiv">
           <video autoplay muted loop src="./Assets/la-reel--min.mp4"></video>
         </div>
+        <div class="Video-hover">
+          <i class="ri-arrow-right-up-line"></i>
+          <h2>
+            Watch our <br />
+            Showreel
+          </h2>
+        </div>
       </div>
       <!-- <div id="page3">
         <video src="https://lazarev.kiev.ua/la24/la-reel--min.mp4"></video>

script.js

@@ -138,8 +138,41 @@ function page3VideoAnimation() {
     });
   });
 }
+
+function videoContainerAnimation() {
+  document
+    .querySelector("#videoDiv video")
+    .addEventListener("mouseenter", function () {
+      // console.log("Inside mouse enter");
+      gsap.to(".Video-hover", {
+        opacity: 1,
+        scale: 1,
+      });
+    });
+  document
+    .querySelector("#videoDiv video")
+    .addEventListener("mouseleave", function () {
+      // console.log("Inside mouse leave");
+
+      gsap.to(".Video-hover", {
+        opacity: 0,
+        scale: 0,
+      });
+    });
+  document;
+  var container = document.getElementById("videoDiv");
+
+  container.addEventListener("mousemove", function (dets) {
+    // console.log("Inside mouse move");
+
+    gsap.to(".Video-hover", {
+      x: dets.x - 710,
+      y: dets.y - 482,
+    });
+  });
+}
 function page4Videonimation() {
-  // To toggke ON/OFF of video
+  // To toggle ON/OFF of video
   var sections = document.querySelectorAll(".sec-right");
   sections.forEach(function (elem) {
     elem.addEventListener("mouseenter", function () {
@@ -247,4 +280,5 @@ navAnimation();
 page2Animation();
 // page3VideoAnimation();
 page4Videonimation();
+videoContainerAnimation();
 page6Animation();

style.css

@@ -435,6 +435,19 @@ nav button svg {
   opacity: 0;
 }
 
+.Video-hover {
+  position: absolute;
+  background-color: #0ba34e;
+  display: flex;
+  gap: 5vh;
+  flex-direction: column;
+  padding: 5vh 4.5vh;
+  border-radius: 50%;
+  z-index: 20;
+  letter-spacing: 0.5px;
+  opacity: 0;
+}
+
 .hover h2 {
   font-family: Grotesk;
   font-size: 2vh;
@@ -443,11 +456,24 @@ nav button svg {
   font-weight: 500;
 }
 
+.Video-hover h2 {
+  font-family: Grotesk;
+  font-size: 2vh;
+  text-transform: uppercase;
+  line-height: 14px;
+  font-weight: 500;
+}
+
 .hover i {
   scale: 1.4;
   padding-left: 5vw;
   /* margin-left: ; */
 }
+.Video-hover i {
+  scale: 1.4;
+  padding-left: 5vw;
+  /* margin-left: ; */
+}
 
 .sec-right video {
   cursor: pointer;
@@ -847,6 +873,7 @@ summary::marker {
   border-radius: 50px;
   height: 95%;
   width: 90%;
+  position: relative;
   overflow: hidden; /* Ensure the video doesn't overflow */
 }