How to Make Z-Index Transition on Image using HTML & CSS ? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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. ApproachBegin 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; } Output: Output Comment More infoAdvertise with us Next Article How to Make Z-Index Transition on Image using HTML & CSS ? R rohan_paul Follow Improve Article Tags : HTML Dev Scripter 2024 Similar Reads How to smoothly transition CSS background images using jQuery? In this article, we will learn to implement a smooth transition of background images using jQuery and CSS. Approach: First, we add a transparent background image using the background-image property in CSS in the style tag. background-image: url(white.jpg); For the transition background image, we use 2 min read How to Add Transition on Hover Using CSS? Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user 2 min read How to use transition effects in the page ? In this article, we will see how to use the transition effect on the page using jQuery, along with knowing the 2 different methods for implementing the transition effect on the page. Transitions allow us to control the way in which transition takes place between the two states of the element. Its ma 7 min read How to Create a Transition Effect on Hover Pagination using CSS ? In web development, pagination is a common feature used to navigate through a large set of data or content. Adding a transition effect on hover to pagination buttons can enhance user interaction and provide visual feedback. ApproachIn this approach, we are going to use CSS transitions. It enables sm 1 min read How to Place Text Over an Image using CSS? Place Text Over an Image means overlaying text on top of an image using HTML and CSS. This effect is commonly achieved by placing the image and text inside a container and then using CSS techniques like absolute positioning, z-index, or flexbox to position the text over the image.Below are the appro 2 min read How to shake an image using CSS Keyframe ? In this article, we will see how to shake an image using CSS Keyframe, along with knowing the different properties used to shake the image, through the code example.A shaking image or shivering effect on the image is used to make the website look more dynamic and attractive. This effect can be appli 2 min read How to add image refaction using CSS ? This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element. The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mi 2 min read How to Change Image Opacity on Hover using CSS ? Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive 2 min read How to create image slider using HTML CSS and JavaScript ? An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images.App 3 min read How to Move Image in HTML? The <marquee> tag in HTML allows you to create scrolling effects for images, making it a simple way to add dynamic movement to your webpage. Images can scroll horizontally or vertically, with various attributes controlling the direction and behavior of the movement.Syntax<marquee> <im 2 min read Like