Another Image on Hover | CSS Animation Effect

byCodingFlicks -October 12, 2020

0

The type of visual effect that occurs when a user moves their mouse over an image on a website is called the image hover animation effect. These types of visual effects can usually be adding, scaling, rotating, or swapping images, etc. These types of effects make your website more interactive and attractive to your users. Today, we will share with you a snippet called Swap Image on hover or Another Image on hover. The whole process is shown in the video tutorial below. If you want, you can watch the video tutorial.

Video Tutorial:

Hope you watched the above video tutorial on CSS image hover animation. In today's modern web world, attractive animations are used to make the content of any website more dynamic. A beautiful hover animation can highlight important information, improve accessibility, and create a sleek, modern look for a website. It can also help retain visitors and increase engagement. E-commerce platforms like Amazon, eBay, and Shopify are using hover animations. They use this feature to show different angles, colors, or descriptions of products. This does not require users to click on each item. This entire process speeds up the decision-making process for buyers and improves the shopping experience. Portfolio websites like Behance and Dribbble use image swap animations or another image on hover animation to showcase their products or display additional details or alternate versions of a design. Corporate websites and business websites like Apple, Nike, Tesla, etc. use hover animations to enhance brand image and visual storytelling. News and magazine websites usually use this web design feature to highlight headlines or preview articles.

Today, we created a simple but cool image hover effect where when the user hovers over an image, another one moves in its place. The HTML structure consists of a .wrapper that contains multiple <figure> elements, each wrapped in a .box. Inside each .box are two images; one is the back image (.img-back), and the other is the front image (.img-front). To make the images stand out, we gave the snippet a deep sky blue background. The .box div acts as a container for the images. The images inside the 'box' div are positioned absolutely to overlap. When we hover over the front image, its opacity drops to zero. After that, the back image simply reveals itself.

You May Also Like:

- Creative Profile Card Animation

- Infinite Client Logo Slider

Another Image on hover animation [ Source Code ]:

To create this snippet, you need to create an HTM and a CSS. 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.

HTML

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Another Image on Hover</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<figure>
			<div class="box">
                <img alt="" class="img-back" src="img/1.jpg"> 
                <img alt="" class="img-front" src="img/2.jpg">
            </div>
		</figure>
		<figure>
			<div class="box">
                <img alt="" class="img-back" src="img/3.jpg"> 
                <img alt="" class="img-front" src="img/4.jpg">
            </div>
		</figure>
		<figure>
			<div class="box">
                <img alt="" class="img-back" src="img/5.jpg"> 
                <img alt="" class="img-front" src="img/6.jpg">
            </div>
		</figure>
	</div>
</body>
</html>

CSS

  body {
	background: deepskyblue;
}
.wrapper {
	width: 1370px;
	margin: 0 auto;
}
figure {
	width: 32%;
	float: left;
	margin: 0;
}
.box {
	position: relative;
	height: 300px;
	width: 400px;
	margin: 40% auto 0;
	color: #fff;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6);
}
.box img {
	position: absolute;
	left: 0;
	width: 400px;
	height: 300px;
	transition: opacity 1s ease-in-out;
}
.box img.img-front:hover {
	opacity: 0;
	cursor: pointer;
}

Image hover animations are a powerful tool in modern-day web design, and they can make a website more intuitive and visually appealing. However, we have to be very careful about its overuse or poor implementation, as it can cause confusion or slow down a site. We hope you have collected the source code. To learn more, click the "Load More" button on our homepage. Thanks for the visit.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.