How to create Image Stack Illusion using HTML and CSS ? - GeeksforGeeks

09 Mar, 2021
In this article, we are going to create an illusion of images below the main image. It is same as the images set of gallery in older version of android. This is a simple project, we can achieve our target only by using HTML AND CSS.
Overview of the project:
Approach:
Create a main div in which we are storing other 3 divs.
Use the pseudo classes in CSS to create the behind effects.
Use of @keyframes for giving some of the transition to our page.
HTML Code:
First, we create a HTML file(index.html).After creating the HTML file, we are going to give title to our webpage using <title> tag. It should be placed inside the <head> tag.Then we link the CSS file that provides all the animations effect to our html. It is also placed inside <head> tag.Now, we add a link from Google Fonts to use different type of font family in our project.Coming to the body section of our HTML code.Firstly, we are giving heading to our page.Then, we have to create a div in which we can store all other divs
First, we create a HTML file(index.html).
After creating the HTML file, we are going to give title to our webpage using <title> tag. It should be placed inside the <head> tag.
Then we link the CSS file that provides all the animations effect to our html. It is also placed inside <head> tag.
Now, we add a link from Google Fonts to use different type of font family in our project.
Coming to the body section of our HTML code.Firstly, we are giving heading to our page.Then, we have to create a div in which we can store all other divs
Firstly, we are giving heading to our page.Then, we have to create a div in which we can store all other divs
Firstly, we are giving heading to our page.
Then, we have to create a div in which we can store all other divs
HTML
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet" href="style.css">    <link rel="preconnect" href="https://fonts.gstatic.com">    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&display=swap"           rel="stylesheet"></head>  <body>    <h1>image stack illusion</h1>    <div class="container">        <div class="img0"></div>        <div class="img1"></div>        <div class="img2"></div>    </div></body>  </html>
CSS Code: CSS is used to give different types of animations and effect to our HTML page so that it looks interactive to all users. In CSS, we have to remember the following points-
Restore all the browser effects.
Use classes and ids to give effects to HTML elements.
Use of @keyframes for providing the animation/transition effects to the browser.
Use of pseudo classes like ::before and ::after.
Use of z-index.
CSS
* {    margin: 0;    padding: 0;    box-sizing: border-box;}  /* Giving all of the general styles   to the body */body {    background: rgb(0, 0, 0);    display: flex;    justify-content: center;    top: 10px;    margin-top: 5em;    font-family: 'Big Shoulders Display', cursive;}  h1 {    color: rgb(240, 147, 8);    animation: todown 5s;    text-transform: uppercase;}  .container {    width: 50.5em;    height: 30em;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    display: flex;}  .img0 {    position: relative;    width: 100%;    height: 100%;    margin-right: 3em;    background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20201230184929/htmlcssjslogo.png);    background-size: cover;    background-position: left;    animation: shrink 1s;}  .img0::after,.img0::before {    content: '';    position: absolute;    z-index: -1;    width: 100%;    height: 100%;}  .img0::after {    background: rgb(255, 255, 255);    transform: rotate(5deg);}  .img0::before {    background: rgb(50, 205, 50);    transform: rotate(-5deg);}  .img1 {    width: 100%;    height: 100%;    position: relative;    left: 3em;    margin-right: 3em;    background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20201230184929/htmlcssjslogo.png);    background-size: cover;    background-position: center;}  .img1::after,.img1::before {    content: '';    position: absolute;    z-index: -1;    width: 100%;    height: 100%;}  .img1::after {    background: rgb(255, 255, 255);    transform: rotate(3deg);}  .img1::before {    background: rgb(50, 205, 50);    transform: rotate(-3deg);}  .img2 {    width: 100%;    height: 100%;    position: relative;    left: 10em;    background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20201230184929/htmlcssjslogo.png);    background-size: cover;    background-position: right;    animation: shrink 1s;}  .img2::after,.img2::before {    content: '';    position: absolute;    z-index: -1;    width: 100%;    height: 100%;}  .img2::after {    background: rgba(255, 255, 255, 0.829);    transform: rotate(7deg);}  .img2::before {    background: rgba(50, 205, 50, 0.836);    transform: rotate(-7deg);}  /* Animations Effect */@keyframes todown {    0% {        opacity: 0;        transform: translateY(-150px);    }    60% {        opacity: 0.6;        transform: translateY(1.2em);        transform: scale(0.5, 0.5);        color: rgb(0, 0, 255);    }    100% {        opacity: 1;        transform: translateY(0);    }}  @keyframes shrink {    0% {        transform: scale(0, 0);    }    50% {        transform: scale(0.5, 0.5);    }    100% {        transform: scale(1, 1);    }}
Combining the above two sections (HTML and CSS code) of codes and run it on the browser. It will display the image stack illusion effect.
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
CSS-Selectors
HTML-Questions
Technical Scripter 2020
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to set space between the flexbox ?
How to Create Time-Table schedule using HTML ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)