Cuberto's Hovering Animation

Hello Coder! Welcome To The Codewaksh Blog. In This Blog, We Learn How To Write A Program Of Cuberto's Hovering Animation By Using Html and Css, Javascript. We Make Meme Generator for web site.

I Hope You Enjoy Our Blog So Let’s Start With A  Html , css and javscruipt For Cuberto's Hovering Animation.

OverView of Project

Compatible Browers: Chrome, Edge, Firefox, Opera, Safari, etc
Responsive: Yes

How to make word meaning  using HTML, CSS?

HTML

    <div class="main">

        <div class="box box-0">

            <img class="b-img img-0" src="https://cdn.dribbble.com/users/57127/screen

            shots/1391502/media/f9ac1fbb646828438433dd44199e87f7.gif" alt="">

            <h1 class="m-b-text mb-t-00">Frontend</h1>

            <div class="hover-layer hl-00"></div>

        </div>

        <div class="box box-1">

            <img class="b-img img-1" src="https://media.tenor.com/TqoopCQE9S8AAAAd/mar

                keting.gif" alt="">

            <h1 class="m-b-text mb-t-01">Web</h1>

            <div class="hover-layer hl-01"></div>

        </div>

        <div class="box box-2">

            <img class="b-img img-2" src="https://www.freecodecamp.org/news/content/im

            ages/2022/11/hire-full-stack-developers1546507474317-1.gif" alt="">

            <h1 class="m-b-text mb-t-02">Developer</h1>

            <div class="hover-layer hl-02"></div>

        </div>

    </div>

Explanation of Above Code <3,

The code is a div with three boxes.

The first box has an image, the second has text, and the third is empty.

The code starts by creating a div with class="box" that contains three classes: "box-0", "box-1", and "box-2".

Each of these classes creates a different type of content in their respective boxes.

The first box is called "Box 0" because it's the topmost one on the page.

It contains an image which will be displayed as its background when hovered over by users who are viewing this page from mobile devices or smaller screens (e.g., laptops).

This box also contains text inside of it which says Frontend .

The code is a simple example of how to use the and tag

CSS

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  gap: 2px;
}
.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 470px;
  background-color: #eee;
}
.box-0 {
  justify-content: right;
}
.box-1 {
  width: 300px;
}
.box-2 {
  justify-content: left;
}
.b-img {
  position: absolute;
  width: 350px;
  height: 350px;
  scale: 0;
  border-radius: 50%;
  transition: 0.2s ease;
  opacity: 0;
  z-index: 10;
}
.box .m-b-text {
  font-size: 6rem;
  color: #fff;
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-weight: 800;
  z-index: 10;
}
.box .hover-layer {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 100;
}

Explanation of Above Code <3,

In this CSS we give style all the elements and give proper padding, color, margin and better looks. Also we have import the google font in CSS.

copy all the CSS code and paste all these into your CSS file.

Css is All is you'r mind.   make sure do you'r best in css file <3

Java Script

let mainbox = document.querySelector(".hover
-layer");
let img = document.querySelector(".b-img");
mainbox.addEventListener("mousemove",(dets)=>{
    img.style.scale = "1";
    img.style.opacity = "1";
    img.style.top = `${dets.y - 260}px`
    img.style.left = `${dets.x - 210}px`
})
mainbox.addEventListener("mouseout", ()=>{
    img.style.scale = "0";
})

Explanation of Above Code <3,

The code starts by creating a new HTML element called mainbox.

This is the container for all of the other elements in this program.

The mousemove event listener sets the opacity and scale of an image on hover, while also moving it to the left and top edges of its container.

The mouseout event listener resets these properties back to their original values.

The code attempts to make the image appear to be floating on top of the main box.

You can also add your mind java script as per your sure.

Thank You!

Learn how to create a Cuberto's Hovering Animation using HTML, CSS, Javascript. in this article. Please leave a comment if we made a mistake or there was any confusion so we can respond or make learning easier for you.