1. Tutorials
  2. Creating a Layered Image Effect using HTML and CSS Tutorial

Creating a Layered Image Effect using HTML and CSS Tutorial

Submitted by oretnom23 on Wednesday, February 22, 2023 - 13:28.

This tutorial will help you to learn how to Create a Layered Image Effect using HTML and CSS. The purpose of this tutorial is to provide the students and beginners with a reference to enhance their knowledge and skills in terms of developing a website with a creative user interface. Here, snippets and scripts of a sample web page that demonstrate the said 3D effect of an image are provided. I have also provided the complete source code files that I created for this tutorial.

What is Layered Image Effect?

A Layered Image Effect is a type of three-dimensional (3D) effect in a website of the web application. It is composed of multiple image layers of the same image which has different CSS designs such as opacity/transparency and position.

How to create a Layered Image Effect?

The Layered Image Effect is not that complicated or hard to create using HTML and CSS. Using the available pseudo-elements and properties of CSS, we can easily achieve this kind of 3D effect.

Here's the list of HTML elements, CSS pseudo-elements, and properties that are useful to achieve the Layered Image Effect:

  • HTML DIV Element <div></div>
  • HTML Image Element <img/>
  • CSS Hover pseudo-element ::hover
  • CSS nth-child selector :nth-child(n)
  • CSS Transform property [value: matrix/matrix3D]
  • CSS Opacity property
  • CSS Rotate property
  • CSS Transition property
  • and some other common CSS properties

Steps of Creating a Layered Image Effect

Here are the steps that you must follow for creating the Layered Image Effect.

  1. Create the Image container and add the multiple image tag with the same image in it.
  2. Customize the design of the images and hide the other layers by default
  3. Add the Layered Images Effect styles using the :hover selector.

Example

Here are the scripts that demonstrate the layered image effect in a simple web page

Interface

The below script is the HTML code that contains the image container and layers.

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>HTML, CSS, and JS - Layered Image Effect</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link href="https://fonts.googleapis.com/css2?family=Mynerve&display=swap" rel="stylesheet">
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  14.     <section>
  15.         <h1 class="text-center"><b>Creating a Layered Image Effect using HTML and CSS</b></h1>
  16.         <hr width="50px">
  17.     <!-- Layered Image Container -->
  18.         <div class="layered-img-container">
  19.             <img src="geo-portrait.jpg" alt="Sample Portait Image"/>
  20.             <img src="geo-portrait.jpg" alt="Sample Portait Image"/>
  21.             <img src="geo-portrait.jpg" alt="Sample Portait Image"/>
  22.             <img src="geo-portrait.jpg" alt="Sample Portait Image"/>
  23.         </div>
  24.     <!-- End of Layered Image Container -->
  25.     </section>
  26. </body>
  27. </html>

Here's the default custom stylesheet of the web page.

  1. :root{
  2.     --mynerve-font:'Mynerve', cursive;
  3.     --light-color:#f9f9f9;
  4.     --dark-color:#20262E;
  5. }
  6.  
  7. body,
  8. html{
  9.     height: 100%;
  10.     width: 100%;
  11. }
  12. h1{
  13.     font-family: var(--mynerve-font)
  14. }
  15. .text-center{
  16.     text-align: center;
  17. }
  18. html{
  19.     overflow: hidden;
  20. }
  21. body{
  22.     background-color: var(--dark-color);
  23.     color:var(--light-color);
  24.     overflow:auto;
  25.     margin: 0;
  26.     padding: 0;
  27. }
  28. section{
  29.     padding-top: 20vh;
  30.     width: calc(100%);
  31.     display: flex;
  32.     flex-direction: column;
  33.     align-items: center;
  34.     justify-content: center;
  35. }

Using only the script above will result in something like the following image:

Layered Image Effect using HTML CSS

Customize the Images Layers

Next, let's customize the design or the style of the image on how it looks by default. Also, we'll hide the other layers.

  1. /**
  2. * Image Container and Default Design
  3. */
  4.  
  5. .layered-img-container {
  6.     display: flex;
  7.     position: relative;
  8.     margin: auto;
  9.     width: 100%;
  10.     align-items: center;
  11.     justify-content: center;
  12.     cursor: pointer;
  13. }
  14. .layered-img-container img {
  15.     position: absolute;
  16.     height: 60vh;
  17.     width: 30vh;
  18.     top: 0;
  19.     transform: matrix(1.5, .2, 1.2, 1, 0, 0);
  20.     rotate: 160deg;
  21.     transition: all .5s ease-in-out;
  22. }
  23. .layered-img-container img:nth-child(4){
  24.     box-shadow: 3px -5px 6px #fff;
  25. }
  26. .layered-img-container img:nth-child(1),
  27. .layered-img-container img:nth-child(2),
  28. .layered-img-container img:nth-child(3){
  29.     opacity: 0;
  30. }

Layered Image Effect using HTML CSS

Add the Layered Image Effect

Then, let's add the styles for the design transition of the 3D effect we wanted to achieve which is the layered image effect.

  1. /**
  2. * Image Hovered Effect (Layered Image)
  3. */
  4. .layered-img-container:hover img{
  5.     box-shadow: 3px -5px 6px #fff;
  6. }
  7. .layered-img-container:hover img:nth-child(4){
  8.     transform: matrix(1.5, .2, 1.2, 1, -21, 47);
  9. }
  10. .layered-img-container:hover img:nth-child(3){
  11.     transform: matrix(1.5, .2, 1.2, 1, -13, 31);
  12.     opacity: .4;
  13. }
  14. .layered-img-container:hover img:nth-child(2){
  15.     transform: matrix(1.5, .2, 1.2, 1, -6, 14);
  16.     opacity: .3;
  17. }
  18. .layered-img-container:hover img:nth-child(1){
  19.     transform: matrix(1.5, .2, 1.2, 1, 0, 0);
  20.     opacity: .09;
  21. }
  22. .layered-img-container:active img {
  23.     rotate: 0deg;
  24.     transform: unset;
  25.     box-shadow: 1px 2px 10px #fff;
  26.     height: auto;
  27.     width: 18vw;
  28. }

Layered Image Effect using HTML CSS

There you go! You can now browse the script on your end to your preferred browser and check if it works and achieve the requirement that we wanted to achieve. The 3D effect will be only triggered when you hover over the image container.

I have also provided the complete source code zip file that I created for this tutorial on this site. It is free to download. The download button is located below this tutorial's content. Feel free to download and modify it the way you desire to meet your own requirements.

That's it! I hope this Creating a Layered Image Effect using HTML and CSS Tutorial will help you with what you are looking for and will be useful for your current and future website development.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags
HTML
css
HTML and CSS Tutorial for Beginners
CSS 3D Tricks
CSS 3D Design Tutorial
CSS Tutorial
Image 3D Design Tutorial
Layered Image Design using CSS
Layered Image effect using CSS

Add new comment

About text formats
  • 352 views