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.
<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>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;
}