Pure CSS Hover Animation

Hello friends, today I will share another snippet based on how we can create a CSS animation while hovering over an image; another image will appear. In these CSS animation examples, I have used pure HTML and CSS to get the required effect. I have shared many HTML CSS, javascript-based snippets before on this website. Would you please make sure to check those snippets as well?

Image hover is standard for every website. in this project, the animation we will make is commonly seen in e-commerce websites. In this project, I have used two different images in a single div element. When we hover over the first image, it will fade away, and the other will appear with a smooth transition effect. For better understanding, I highly recommend you to the tutorial below of pure CSS hover animation and continue from there.

I hope you watched the whole video and get the basic ideas of creating the snippet. This snippet is for beginners who are experimenting with CSS animations.

You might like this:

In the HTML part, I have taken a div named 'box area, and inside that, I have taken the bootstrap container and row class. Then I have taken three bootstrap column grids. Inside each of the boxes, I have taken another div named 'single-box with two images. I called one of the 'img-front' and the other 'img-back.'

To align the 'box area div in the middle, I have taken a custom padding from too and bottom. Then I have given the single box div a relative position value. Later, I used the absolute position value for the images and set a transition value for the opacity. I have set the opacity to 0 for the front image div for the hover effect, and we got our required result.

Pure CSS Hover Animation [ Source Code ]:

For creating this project, you have to make two separate files. One is HTML, and the other one is CSS. You have to add appropriate extensions with the files. Then down the code from below and paste them in the appropriate files and save.

ADD HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pure CSS Hover Animation | CSS Animation Examples</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">	
</head>
<body>
    <div class="box-area">
		<div class="container">
		<div class="row">
			<div class="col-md-4">
				<div class="single-box">
					<img class="img-back" src="img/1.jpg" alt="">
					<img class="img-front" src="img/2.jpg" alt="">
				</div>
			</div>
			<div class="col-md-4">
				<div class="single-box">
					<img class="img-back" src="img/3.jpg" alt="">
					<img class="img-front" src="img/4.jpg" alt="">
				</div>
			</div>
			<div class="col-md-4">
				<div class="single-box">
					<img class="img-back" src="img/5.jpg" alt="">
					<img class="img-front" src="img/6.jpg" alt="">
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

ADD CSS:

.box-area{
    padding: 10% 0;
}
.single-box {
    position: relative;
    height: auto;
    width: 380px;
    margin: 10% auto 0;
    color: #fff;
}
.single-box img{
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 1s ease-in-out ;
}
.single-box img.img-front:hover{
    opacity:0;
    cursor: pointer;
}

I hope you have successfully created the pure CSS hover animation. If in case the code doesn't work, then download the code below and extract it to get the full source code. If you like this simple snippet, then share the snippet and follow our social media profiles or stay connected with this blog. Thank you for stopping by this blog.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form