Hello Friends, today in this blog we will learn to create a Z-Index Transition on an Image using CSS. As you know, in my earlier blog I shared Animated Profile Card using HTML & CSS which you have liked very much considering the animated profile card, now I will going to create a z-index transition on the cards.
Z-Index is the property of CSS which is used to take forward specific elements on the web pages. It is the essential property of web designing to overlap or bring forward particular elements, cards, text, images, and so on.
As you can see in the given image of the program that we are going to build today. All the images are overlapping each other. The last image is only visible to us, and we can’t see others’ full images. I have provided a small image icon at the bottom side of every image denoting a small tooltip. Basically in this program, we can see all the images by hovering over that every particular image.
To see the real tutorial of this z index animation of this program, you can watch the full video tutorial that I have provided below. After watching the given tutorial you will get all ideas of the coding of this CSS hover animation with the z-index transition effect, and you will learn how that z-index transition works perfectly.
Full Video Tutorial of Z-Index Transition on Image using CSS
As you have seen in the given tutorial on z- index hover animation. At first, all the images are overlapping each other and we can see only the last images but when I hovered over every icon of the images hovered image smoothly moves right side and is visible properly then comes forward from all images then comes into its real position. I have given the same animation to all images. To make this program I used only CSS3.
If you are familiar with HTML & CSS then you can easily make this transition on the cards. Those friends who are feeling difficulty to built this z-index effect or transition, they can copy or download all source code files of this program which I have given below;
You Might Like This:
Z-Index Transition on Image [ Source Code ]
<!DOCTYPE html>
<!-- Website - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Image Hover Animation HTML CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="icon-image">
<div class="icon">
<img src="images/img1.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img1.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">David Marloo</div>
<div class="job">Designer || Developer</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img2.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img2.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Lilly Carls</div>
<div class="job">Blogger || Designer</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img3.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img3.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Stephen Bald</div>
<div class="job">Designer || Developer</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img4.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img4.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Mike Tyson</div>
<div class="job">Photographer || Youtuber</div>
</div>
</div>
</div>
</div>
<div class="icon-image">
<div class="icon">
<img src="images/img5.jpg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img5.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">Emma Oliva</div>
<div class="job">Developer || Designer</div>
</div>
</div>
</div>
</div>
<div class="icon-image last">
<div class="icon">
<img src="images/img6.jpeg" alt="" />
</div>
<div class="hover-image one">
<div class="img">
<img src="images/img6.jpg" alt="" />
</div>
<div class="content">
<div class="details">
<div class="name">David Marloo</div>
<div class="job">Blogger || Youtuber</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #0396FF;
}
.container{
height: 500px;
display: flex;
min-width: 400px;
align-items: flex-end;
justify-content: center;
margin-top: -55px;
}
.icon-image{
position: relative;
height: 70px;
width: 70px;
margin: 0 5px;
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
border-radius: 50%;
background: #fff;
}
.icon-image .icon img{
position: absolute;
height: 95%;
width: 95%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
border-radius: 50%;
border: 3px solid #0396FF;
}
.icon-image::before{
content: '';
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: -50px;
transform: translateX(-50%);
}
.icon-image .hover-image{
position: absolute;
height: 350px;
width: 300px;
bottom: 100px;
left: 50%;
z-index: 0;
transform: translateX(-50%);
border-radius: 25px;
pointer-events: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
transition: transform 0.5s ease, z-index 0s, left 0.5s ease ;
transition-delay: 0s, 0.5s, 0.5s;
}
.icon-image:hover .hover-image{
left: -200px;
z-index: 12;
transform: translateX(80px);
transition: left 0.5s ease, z-index 0s, transform 0.5s ease;
transition-delay: 0s, 0.5s, 0.5s;
}
.hover-image img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
border: 3px solid #fff;
border-radius: 25px;
}
.hover-image .content{
position: absolute;
width: 100%;
bottom: -10px;
padding: 0 10px;
}
.content::before{
content: '';
position: absolute;
height: 20px;
width: 20px;
background: #fff;
left: 50%;
bottom: -7px;
transform: rotate(45deg) translateX(-50%);
z-index: -1;
}
.content .details{
position: relative;
background: #fff;
padding: 10px;
border-radius: 12px;
text-align: center;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
.icon-image:hover .details{
transition: all 0.5s ease;
transition-delay: 0.9s;
opacity: 1;
transform: translateY(4px);
pointer-events: auto;
}
.details::before{
content: '';
position: absolute;
height: 20px;
width: 20px;
background: #fff;
left: 50%;
bottom: -15px;
transform: rotate(45deg) translateX(-50%);
z-index: -1;
}
.content .details .name{
font-size: 20px;
font-weight: 500;
}
.content .details .job{
font-size: 17px;
color: #0396FF;
margin: -3px 0 5px 0;
}
.content .details a:hover{
color: #0396FF;
}
.container .last .hover-image{
transition: none;
}
.container .last:hover .hover-image{
transition: 0;
}
.last:hover .details{
transition-delay: 0s;
}
If you face any difficulties while creating your Image Hover Animation or your code is not working as expected, you can download the source code files for this CSS Image Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
