Image Stack Animation on hover CSS

Image Stack Animation on hover CSS

CSS animation is a web design technique that allows you to move or give an effect to various elements of a website. Some of these effects include changing the color of buttons, sliding images, or smoothing text. CSS animation plays an important role in making a website more fun and engaging to use. Our snippet today is another simple example of CSS animation. Here, hovering over an image will create a stack effect animation. The video tutorial below shows the process of creating this CSS animation examples.

Video Tutorial:

We hope you have watched the video tutorial on CSS animation. Why is CSS animation useful? Because by animating the elements of a website, like moving, fading, or bouncing, people start noticing important things and engagement increases overnight. CSS animation does not slow down the speed of the website like JavaScript or other animations. Image stack effect is a pile of images stacked on top of each other. In this snippet, we have given this stacked effect to an image hover state. Various types of websites, like Online stores, Artist or photographer websites, Game or movie websites, Fancy company websites, and Landing Page websites, use this type of image hover effect.

You may also like:

Image Stack Animation on hover CSS [ Source Code ]:

To create this CSS Image Stack Animation on hover snippet, you need to create an HTML and CSS file. Then, copy the code from the code box below and paste it into those files. You can also download the code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image stack animation on hover</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <img src="1.jpg"/>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	transition: .9s;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #d1d3d8;
}
.wrapper {
	position: relative;
	width: 300px;
	height: 400px;
}
.wrapper img {
	width: 100%;
	height: 100%;
	display: block;
	border: 6px solid #fff;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}
.wrapper::before, .wrapper::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 6px solid #fff;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: all 0.8s ease-in-out;
	z-index: -1;
	top: 0;
	border-radius: 10px;
}
.wrapper::before {
	background: #efeee7;
	transform: rotate(0deg) translateX(0px);
}
.wrapper::after {
	background: #85888d;
	transform: rotate(0deg) translateX(0px);
}
.wrapper:hover::before {
	opacity: 1;
	transform: rotate(-10deg) translateX(-10px);
}
.wrapper:hover::after {
	opacity: 1;
	transform: rotate(10deg) translateX(10px);
}
.wrapper:hover img {
	transform: scale(0.95);
	transition: .9s;
}

If you want to rely on something other than JavaScript for the user engagement, aesthetics, and interactive experience of a website, then CSS animation is a great alternative. I hope you find today's snippet useful. Thank you very much for visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box