In the world of web design, adding subtle but engaging hover effects to text elements can elevate the user experience and bring a touch of interactivity to your website. With the power of CSS, we can unleash our creativity to transform static text into dynamic, eye-catching displays.
In this blog post, we’ll embark on a journey to explore various hover effects for text using only CSS. From color changes to transitions and animations, we’ll uncover the versatility of CSS and learn how to breathe life into our text elements with captivating hover effects.
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen Hover effect (CSS) by Amit Sheen (@amit_sheen) on CodePen.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Text with hover effect using pure css - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="script.js"></script>
</body>
</html>Paste the below code in your <body> tag.
<div class="banner">
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div><div class="trigger"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
<div class="text">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>CSS Code
Create a file style.css and paste the code below.
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap');
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
html, body {
font-size: 12px;
}
$backClr: #aaa;
$textClr: #012;
body {
font-family: 'Oleo Script', cursive;
background-color: $backClr;
color: $textClr;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.banner {
position: relative;
width: 60em; height: 9em;
display: flex;
perspective: 15em;
perspective-origin: 50% calc(50% - 15em);
cursor:text;
& > .text {
left: -5rem;
& .text {
left: 1rem;
}
}
$divs: '.text';
@for $i from 0 to 70 {
& > #{$divs} > .content::after {
left: #{35 - $i}rem;
}
$divs: $divs + ' > .text';
}
}
.trigger {
position: relative;
width: 1em; height: 9em;
&:hover::after {
content: '';
position: absolute;
top: 55%; left: 50%;
transform: translate(-50%, -50%);
width: 12em; height: 12em;
background-image: radial-gradient(#0007, #0000 66%);
user-select: none;
pointer-events: none;
}
@for $i from 0 to 60 {
&:nth-child(#{$i + 1}):hover {
$divs: '.text';
@for $ii from 0 to ($i) {
$divs: $divs + ' > .text';
}
$angle: 5deg;
@for $ii from 0 to 12 {
& ~ #{$divs} {
@if ($ii < 3) {
transform: rotateY(#{$angle * -1});
} @else if ($ii > 8) {
transform: rotateY(#{$angle * -1});
} @else {
transform: rotateY($angle);
}
$c: (7 - abs($ii - 6)) * 1%;
background-color: lighten($backClr, $c);
color: lighten($textClr, $c);
}
$divs: $divs + ' > .text';
}
}
}
}
.text {
position: absolute;
top: 0;
width: 1em; height: 9em;
user-select: none;
pointer-events: none;
transform-style: preserve-3d;
transform-origin: left;
& .content {
position: absolute;
inset: 0;
transform-style: preserve-3d;
overflow: hidden;
&::after {
content: "How's that for a hover effect?";
white-space: nowrap;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
font-size: 5em;
}
}
}Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/amit_sheen/full/NWpLKPy
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
