Parallax Effect on Hover

In this tutorial, you will learn how to add a reveal animation to a text using CSS. Watch the video below for a detailed tutorial.

HTML

<body>
	<div class="circle">
		<div class="circle-layer">
			<img src="images/bg.jpg">
		</div>
		<div class="circle-layer">
			<img src="images/car.png">
		</div>
	</div>
</body>

CSS

body {
	background-color: #2E3537;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.circle {
	background-color: #100D2E;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	width: 300px;
	height: 300px;
	box-shadow: 0 0 5px rgba(73,73,73);
	transition: all 0.4s;
}

.circle-layer {
	position: absolute;
	width: 600px;
	height: 300px;
	top: 0;
	left: -300px;
	transition: all 0.5s;
}

.circle-layer img {
	width: 100%;
	position: absolute;
	bottom: 0;
}

.circle-layer:nth-of-type(1) {
	top: 0;
	left: 0;
}

.circle-layer:nth-of-type(1) img {
	height: 100%;
	object-fit: cover;
}

.circle-layer:nth-of-type(2) {
	top: 0;
	left: -250px;
}

.circle-layer:nth-of-type(2) img {
	width: 400px;
}

.circle:hover {
	transform: scale(1.1);
}

.circle:hover .circle-layer:nth-of-type(1) {
	left: -80px;
	transition: all 5s linear;
}

.circle:hover .circle-layer:nth-of-type(2) {
	left: -100px;
	transition: all 5s linear;
}

Image Source

https://www.freepik.com/free-vector/river-with-rocky-shore-trees-night_25726625.htm#query=parallax&position=21&from_view=search&track=sph
https://www.freepik.com/free-vector/modern-blue-urban-adventure-suv-vehicle-illustration_1361484.htm#query=car%20clipart%20png&position=5&from_view=search&track=ais