Service Box with text Animation

In this blog, we will share code snippets on Service Box with text Animation. On this Website, I have shared many snippets on CSS animation examples, HTML CSS, JavaScript, jQuery plugins implementation, etc. For this project, follow the below video tutorial.

I hope you have watched the video. Every website has a service page. There are lots of service page examples. In this service page design or service box design, we have implemented a CSS text animation. When we hover over the boxes in the services page layout or service page design, we will see the CSS animation in effect.

Service Box with text Animation [ Source Code ]:

To make the snippet, create two files. One is an HTML file and, the other is a CSS file. After that, link the external CSS in the HTML and paste the copied code.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Service Box with text Animation</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="services-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-4">
					<div class="single-box text-center">
						<a href="#"><span>Graphics</span> <span class="overlay-text">Graphics</span></a>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quae, at ad dignissimos! Alias ut praesentium minus sint ex sequi quos eaque, inventore, nostrum sed!</p><button>learn more</button>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="single-box text-center">
						<a href="#"><span>Wordpress</span> <span class="overlay-text">Wordpress</span></a>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quae, at ad dignissimos! Alias ut praesentium minus sint ex sequi quos eaque, inventore, nostrum sed!</p><button>learn more</button>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="single-box text-center">
						<a href="#"><span>Photography</span> <span class="overlay-text">Photography</span></a>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quae, at ad dignissimos! Alias ut praesentium minus sint ex sequi quos eaque, inventore, nostrum sed!</p><button>learn more</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

ADD CSS:

.services-area {
	padding-top: 12%;
}
.single-box {
	background: #222;
	color: #fff;
	padding: 40px;
	border-radius: 15px;
}
.single-box p {
	margin-top: 20px;
}
.single-box button {
	background: -webkit-linear-gradient(45deg, #ff00cc, #333399);
	border: none;
	padding: 10px 30px;
	display: inline-block;
	margin-top: 15px;
	color: #fff;
	text-transform: uppercase;
}
.single-box a {
	padding: 10px 50px;
	color: white;
	position: relative;
	height: 100%;
	text-decoration: none;
	font-size: 25px;
	text-transform: uppercase;
}
.overlay-text {
	position: absolute;
	left: 50px;
	top: 8px;
	transition: all .7s ease-in;
	background: -webkit-linear-gradient(45deg, #ff00cc, #333399);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.single-box a:hover {
	color: #fff;
}
.single-box:hover .overlay-text {
	opacity: 0;
	transform: scale(2);
	-webkit-transform: scale(2);
}

I hope you have implemented the code. if you like the snippet, consider subscribing to our YouTube channel and press the Bell notification icon for future video notification. Thank you for visiting this blog.

Post a Comment

Post a Comment

About Us

Contact Form

Service Box with text Animation

You might like

Post a Comment

Post a Comment

Contact Form