Get into the spooky spirit with our Halloween-themed CSS tutorial! In this video, we’ll show you how to create a creepy, blurred text effect that transforms when you hover over it. Perfect for adding a touch of eerie elegance to your Halloween website or project.
We’ll cover:
- Setting up the HTML structure
- Applying CSS for blurred text
- Creating the hover animation effect
- Using keyframes for smooth transitions
By the end of this tutorial, you’ll have a chilling hover effect that’s sure to impress your visitors. Don’t miss out on this fun and festive coding project!
HTML:
Create an HTML file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CSS Hover Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p class="text">CREEP</p>
</div>
</body>
</html>CSS:
Create a styles.css file and add the following code:
@import url(https://fonts.googleapis.com/css?family=Creepster);
body {
overflow-x: hidden;
background-color: #fff;
}
body.bg {
background-color: #000;
}
.container {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
p {
font-family: 'Creepster', cursive;
font-size: 80px;
text-align: center;
cursor: pointer;
}
.text {
color: transparent;
text-shadow: 0px -1px 30px #ff0000;
transition: all .2s ease;
}
.text:hover {
color: #ff0000;
text-shadow: none;
transition: all .2s ease;
transform: scale(2,2);
}jQuery:
Create a main.js file and add the following code:
$('.text').hover(function () {
$('body').addClass('bg');
}, function () {
$('body').removeClass('bg');
});Happy coding!
