How To Make Image Animation On Website Using HTML And CSS

Demo Download

Here in this video you will learn to add image animation effect on website using HTML and CSS Step by Step. When i hover cursor on image, image divided by 25 pieces and animate to different locations.

Steps to Make Image Animation using HTML & CSS

To create a image animation we need to follow the below steps.

  1. Write an HTML Markup
  2. Write CSS
  3. Need Picture in 25 pcs

1. Write an HTML Markup

First we need to create an index.html file and paste the following HTML markup in its body section.

<!DOCTYPE html>
<html>
<head>
	<title>Image Animation On Website Using HTML And CSS</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="hero">
		<div class="small-img">
			<img src="1.jpg">
		</div>
		<div class="small-img">
			<img src="2.jpg">
		</div>
		<div class="small-img">
			<img src="3.jpg">
		</div>
		<div class="small-img">
			<img src="4.jpg">
		</div>
		<div class="small-img">
			<img src="5.jpg">
		</div>
		<div class="small-img">
			<img src="6.jpg">
		</div>
		<div class="small-img">
			<img src="7.jpg">
		</div>
		<div class="small-img">
			<img src="8.jpg">
		</div>
		<div class="small-img">
			<img src="9.jpg">
		</div>
		<div class="small-img">
			<img src="10.jpg">
		</div>
		<div class="small-img">
			<img src="11.jpg">
		</div>
		<div class="small-img">
			<img src="12.jpg">
		</div>
		<div class="small-img">
			<img src="13.jpg">
		</div>
		<div class="small-img">
			<img src="14.jpg">
		</div>
		<div class="small-img">
			<img src="15.jpg">
		</div>
		<div class="small-img">
			<img src="16.jpg">
		</div>
		<div class="small-img">
			<img src="17.jpg">
		</div>
		<div class="small-img">
			<img src="18.jpg">
		</div>
		<div class="small-img">
			<img src="19.jpg">
		</div>
		<div class="small-img">
			<img src="20.jpg">
		</div>
		<div class="small-img">
			<img src="21.jpg">
		</div>
		<div class="small-img">
			<img src="22.jpg">
		</div>
		<div class="small-img">
			<img src="23.jpg">
		</div>
		<div class="small-img">
			<img src="24.jpg">
		</div>
		<div class="small-img">
			<img src="25.jpg">
		</div>

	</div>
</body>
</html>

As you can see above there is a 25 pcs of images which show you one picture on website, All 25 pcs of images in div and get class hero. Now we move to css for animation

2. Write CSS

Now we need to Style our animation, paste the following styles in CSS either in head section or you can also include external style sheet.

*{
	margin: 0;
	padding: 0;
}
.hero{
	display: flex;
	width: 300px;
	height: 300px;
	flex-wrap: wrap;
	margin: 150px auto;
}
.small-img{
	flex-basis: 60px;
	cursor: pointer;
	position: relative;
	transition: 1s;
	box-shadow: 10px 10px 13px 4px rgba(0,0,0,0.10);
}
.small-img img{
	width: 100%;
	height: 100%;
}
.hero:hover .small-img:nth-child(1){
	transform: translate(60px, 230px) rotate(360deg);
}
.hero:hover .small-img:nth-child(2){
	transform: translate(-260px, -150px) rotate(360deg);
}
.hero:hover .small-img:nth-child(3){
	transform: translate(91px, 295px) rotate(360deg);
}
.hero:hover .small-img:nth-child(4){
	transform: translate(440px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(5){
	transform: translate(100px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(6){
	transform: translate(-370px, 320px) rotate(360deg);
}
.hero:hover .small-img:nth-child(7){
	transform: translate(0, 480px) rotate(360deg);
}
.hero:hover .small-img:nth-child(8){
	transform: translate(-280px, -80px) rotate(360deg);
}
.hero:hover .small-img:nth-child(9){
	transform: translate(-600px, 250px) rotate(360deg);
}
.hero:hover .small-img:nth-child(10){
	transform: translate(400px, -90px) rotate(360deg);
}
.hero:hover .small-img:nth-child(11){
	transform: translate(40px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(12){
	transform: translate(140px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(13){
	transform: translate(-400px, -220px) rotate(360deg);
}
.hero:hover .small-img:nth-child(14){
	transform: translate(400px, 190px) rotate(360deg);
}
.hero:hover .small-img:nth-child(15){
	transform: translate(300px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(16){
	transform: translate(0px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(17){
	transform: translate(400px, -320px) rotate(360deg);
}
.hero:hover .small-img:nth-child(18){
	transform: translate(40px, -220px) rotate(360deg);
}
.hero:hover .small-img:nth-child(19){
	transform: translate(200px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(20){
	transform: translate(350px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(21){
	transform: translate(-120px, -220px) rotate(360deg);
}
.hero:hover .small-img:nth-child(22){
	transform: translate(320px, -90px) rotate(360deg);
}
.hero:hover .small-img:nth-child(23){
	transform: translate(-160px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(24){
	transform: translate(-350px, -120px) rotate(360deg);
}
.hero:hover .small-img:nth-child(25){
	transform: translate(-60px, 220px) rotate(360deg);
}

Above CSS is very simple, i have defined the hero class styles, small-img class styles, small-img img styles and hero:hover with small-img styles in it.

3. Need Images

All 25 pieces of image are available in ZIP file, Click on download button and get it.

Conclusion

Today we learnt how to make image animation on website using HTML & CSS, you can add multiple images just by adding the image source in HTML markup and changing names and same as in css file.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Leave a Reply

Your email address will not be published. Required fields are marked *