Multiple-Overlay-Animation-On-Image-Using-HTML-And-CSS

Multiple Overlay Animation On Image Using Html Css Only

In this tutorial, we're going to explore a captivating visual effect known as "Multiple Overlay Animation on Image". This effect is crafted using pure CSS and can add a touch of magic to your web projects. It's not limited to images; you can also employ it for transitions between pages on your website or to create seamless content changes with elegant animations.

If you're interested in diving deeper into web page transitions, We recommend checking out another article titled "Page Transitions Using GSAP" for more insights and advanced techniques. We also have an article titled "Image Overlay Effect On Hover Using Html Css Only".

In this particular article, there is an image, and when you hover your mouse over it, three different layers will appear one after the other, moving from the left side to the right side of the image. These layers have different colors. If you prefer, you can make all three layers have the same color, but in doing so, they will look identical. Therefore, it's recommended to use different colors to make the layers distinct and visually appealing.

If you're interested in learning how to create animations using JavaScript, GSAP, and different plugins. We've already put together a collection of animations made with various JavaScript plugins, Gsap and javscript. Take a look at our playlist for a wide range of web development projects. Don't forget to explore the GSAP animations playlist as well!

01. Html
02. CSS
03. Output
04. Youtube Video
05. Source Code

Read Also:

HTML:

Let's start by looking at the basic structure of an HTML document, as shown below.

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Overlay Animation On Image | Rustcode</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>

Now that we've set up the fundamental HTML structure and made sure all the required parts are included in the HTML document, it's time to move forward and start creating the actual HTML code. In this project, we used a car image, and you can grab that image from this github link.

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Overlay Animation On Image | Rustcode</title> 
  <link rel="stylesheet" href="style.css">
</head>
<body>

 <div class="container">
   <img src="car.jpg">
   <span class="layer layer-1"></span>
   <span class="layer layer-2"></span>
   <span class="layer layer-3"></span>
 </div>

<script src="script.js"></script>
</body>

</html>

It defines the document type and creates an HTML structure.
It has a <head> section with a title "Multiple Overlay Animation On Image | Rustcode" and includes an external stylesheet named "style.css".
Inside the <body> section, there's a <div> element with the class "container" containing an <img> element displaying an image named "car.jpg".
Three <span> elements with different class names ("layer-1", "layer-2", and "layer-3") are also inside the "container" <div>. These elements are likely used for creating overlay effects or animations on top of the image using CSS.

Read Also:

CSS:

We use CSS to make our HTML document look nice. Now, let's move on and start writing some CSS code.

body{
  margin: 0px;
  padding: 0px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F1F1F1;
}

.container{
  position: relative;
  cursor: pointer;
}

img{
  width: 710px;
  height: 400px;
  cursor: pointer;
  border-radius: 4px;
}

.layer{
  position: absolute;
  top: 0px;
  left: 0px;
  background: #FBC6A4;
  width: 0px;
  height: 400px;
  z-index: 1;
  border-radius: 4px;
}

.container:hover .layer-1{
  animation: firstLayer 1s linear;
  background: #FBC6A4;
}

.container:hover .layer-2{
  animation: secondLayer 1s linear;
  background: #F4A9A8;
  animation-delay: 0.3s;
}

.container:hover .layer-3{
  animation: thirdLayer 1s linear;
  background: #CE97B0;
  animation-delay: 0.6s;
}

body: This sets up some basic styles for the entire webpage. It removes any default margins and padding, makes the body take up the full viewport height (100vh), and centers its content both horizontally and vertically. The background color is set to a light gray.
.container: This is a style for a container element. It makes the container relative to its position (which affects how absolutely positioned child elements behave). It also changes the cursor to a pointer when hovering over it.
img: This styles the images within the container. It sets a fixed width and height, changes the cursor to a pointer when hovering over the image, and adds a slight border radius for rounded corners.
.layer: This is a style for the overlay layers that appear when hovering over the container. These layers are initially hidden (width: 0px;) and positioned absolutely over the image. They have a background color and a border radius to match the image's rounded corners.
.container:hover .layer-1, .container:hover .layer-2, .container:hover .layer-3: These are specific styles that apply when you hover over the container. Each layer has its own animation and background color. They also use animation-delay to stagger their appearance, creating a sequential effect when you hover over the container. The animation property references animations called firstLayer, secondLayer, and thirdLayer.

We've just finished using basic CSS to make our webpage look more attractive. Now, let's take it up a notch by adding animations through the use of '@keyframes'.

@keyframes firstLayer {
  0%{
    width: 0px;
    left: 0px;
  }
  50%{
    width: 710px;
    left: 0px;
  }
  100%{
    width: 0px;
    left: 710px;
  }
}

@keyframes secondLayer {
  0%{
    width: 0px;
    left: 0px;
  }
  50%{
    width: 710px;
    left: 0px;
  }
  100%{
    width: 0px;
    left: 710px;
  }
}

@keyframes thirdLayer {
  0%{
    width: 0px;
    left: 0px;
  }
  50%{
    width: 710px;
    left: 0px;
  }
  100%{
    width: 0px;
    left: 710px;
  }
}

The animations start with an element having a width of 0 pixels and being positioned at the left edge (left: 0px).
At 50% progress of each animation, the element's width increases to 710 pixels, but its left position remains at 0 pixels.
At 100% progress, the element's width goes back to 0 pixels, and its left position shifts to 710 pixels, effectively moving it to the right.

Read Also:

Output:

Youtube Video:

We've included a YouTube video from our channel to help you grasp the concepts better and improve your skills in creating user-friendly web interfaces. Our YouTube channel offers a wealth of videos that cover topics related to user interface design and web development. It's a great resource for learning more about web development as well.

Source Code:

After you've finished reading this article and watching a YouTube video, if you'd like to get the source code, you can simply download it from this location and modify it to suit your requirements.

Read Also:

Archive