How to Make Z-Index Transition on Image using HTML & CSS ?

Last Updated : 11 Mar, 2024

By using the z-index property, CSS provides the ability to position elements above or below other elements. We can utilize the z-index property to create a seamless transition effect for elements when there is a change in the z-index value after a certain delay.

This article will specifically focus on how to modify the z-index values for images so that they seem to move from the background to the foreground when we hover over their thumbnail.

Screenshot-2024-02-29-121828

Approach

Begin with a basic HTML structure, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags. Import the style.css file for styling.
Inside the <body> tag, create a <header> and <main> section. The header contains the title “Geeks for Geeks”, and the main section contains a paragraph explaining the purpose of the page.
Inside the main section, create multiple image containers using the <div> element with the class image-container. Each container contains two images: a main image and a thumbnail.
Use CSS to style the header, main section, and image containers. Set the background color of the body to a shade of green. Style the header text with a white background and green font color. Set the height and width of the main section and position it relative to the body.
Use CSS to create a transition effect on the main image when hovering over the image container. When hovering over an image container, the main image moves to the left and increases in size, creating a zoom-in effect. The z-index of the main image is also increased to bring it to the front.
Use CSS to create an arrow shape at the bottom of the main image. The arrow is created using the ::before pseudo-element and styled with a white background and black border.
Use CSS to set different heights for the main images in each image container. This creates a staggered effect where the main images are at different heights relative to the bottom of the image containers.

Example: Implementation to show z-index transition on image.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Z-Index Transition on Image</title>
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <header>
        <h1>Geeks for Geeks</h1>
    </header>
    <main>
        <p>
              Z-Index Transition on 
              Image using HTML and CSS
          </p>
        <div class="main-container">
            <div class="image-container">
                <div class="main-image">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121512/gfg1.jpg"
                         alt="Geeks for Geeks" />
                </div>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121512/gfg1.jpg"
                         alt="Geeks for Geeks" />
                </div>
            </div>
 
            <div class="image-container">
                <div class="main-image">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="Geeks for Geeks" />
                </div>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg2.jpg"
                         alt="Geeks for Geeks" />
                </div>
            </div>
            <div class="image-container">
                <div class="main-image">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg3.jpg"
                         alt="Geeks for Geeks" />
                </div>
                <div class="thumbnail">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240218121513/gfg3.jpg"
                         alt="Geeks for Geeks" />
                </div>
            </div>
        </div>
    </main>
</body>
 
</html>

CSS

/* style.css */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(47, 255, 141);
}
 
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
 
/* GFG TEXT */
header h1 {
    background-color: #fff;
    padding: .2em .5em;
    border-radius: 1em;
    color: green;
    font-size: 2rem;
    margin-bottom: 10px;
}
 
main {
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    position: relative;
}
 
/* Paragraph */
main p {
    color: white;
    font-family: sans-serif;
}
 
.main-container {
    position: absolute;
    display: flex;
    top: 70%;
    column-gap: 30px;
}
 
.image-container {
    position: relative;
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 10px black;
}
 
/* Small image preview at the bottom */
.thumbnail img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
 
/* Main image transition  */
.main-image {
    height: 200px;
    width: 200px;
 
    position: absolute;
    left: 50%;
    transform: translateX(-53%);
 
    z-index: 0;
    pointer-events: none;
 
    outline: 2px solid black;
    border-radius: 10px;
 
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.308);
 
    transition: transform 0.5s ease, z-index 0s, left 0.5s ease;
    transition-delay: 0s, 0.5s, 0.5s;
}
 
/* Hover transition for all images except the last image */
.image-container:not(:last-child):hover .main-image {
    left: -150px;
    z-index: 10;
    transform: translateX(70px);
    transition: left 0.5s ease, z-index 0s, transform 0.5s ease;
    transition-delay: 0s, 0.5s, 0.5s;
}
 
.main-image img {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}
 
/* Arrow at the bottom of the main image */
.main-image::before {
    content: '';
    position: absolute;
    height: 30px;
    width: 30px;
    background: white;
    left: 50%;
    bottom: -10px;
    border-radius: 120px 120px 120px 10px;
    transform: rotate(-45deg) translateX(-50%);
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    z-index: -1;
}
 
/* Different height of the main images */
 
.main-container .image-container:nth-child(1) .main-image {
    bottom: 105px;
}
 
.main-container .image-container:nth-child(2) .main-image {
    bottom: 100px;
}
 
.main-container .image-container:nth-child(3) .main-image {
    bottom: 95px;
}