A Coding Boy

;
A Coding Boy

demo post

only for demo nasa prospect

only for demo the gonnies

most popular

how to create parallax website

how to create a beautiful card

how to create a netflix login page

how to create flipping ui card

how to create image generator website

Z-Index Transition on Image using CSS

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.

Z-Index Transition on Image [ Source Code ]

First, paste the following codes into your index.html file.

<!DOCTYPE html>

<head>

<title>Image Hover Animation HTML CSS | CodingNepal</title>

</head>

<body>

</div>

</div>

<div class="name">David Marloo</div>

<div class="job">Designer || Developer</div>

</div>

</div>

</div>

<div class="name">Lilly Carls</div>

<div class="job">Blogger || Designer</div>

</div>

</div>

</div>

<div class="name">Stephen Bald</div>

<div class="job">Designer || Developer</div>

</div>

</div>

</div>

<div class="name">Mike Tyson</div>

<div class="job">Photographer || Youtuber</div>

</div>

</div>

</div>

<div class="name">Emma Oliva</div>

<div class="job">Developer || Designer</div>

</div>

</div>

</div>

<div class="name">David Marloo</div>

<div class="job">Blogger || Youtuber</div>

</div>

</body>

</html>

<!DOCTYPE html>  <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;

}

@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.

live demo

Download files

Info

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}