Laser Hover Effect

Developer
James Steinbach
Size
2,354 Kb
Views
20,240
  1. Laser Hover Effect Previews
  2. Laser Hover Effect HTML Codes
  3. Laser Hover Effect CSS Codes

How do I make an laser hover effect?

Using a background-image (gradient), background-clip, & animation for a cool laser hover effect.. What is a laser hover effect? How do you make a laser hover effect? This script and codes were developed by James Steinbach on 05 November 2022, Saturday.

Laser Hover Effect Previews
IQ Test

Laser Hover Effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Laser Hover Effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="hover">Hover on Me!</h1>
</body>
</html>

Laser Hover Effect - Script Codes CSS Codes

.hover { text-align: center; font-size: 6em; font-family: Gotham, Proxima Nova, Helvetica Neue, Helvetica, sans-serif; font-weight: 900; text-transform: uppercase; background-image: -webkit-linear-gradient(left, #0D4F8B 0, #0D4F8B 22.5%, rgba(13, 79, 139, 0.25) 27.5%, #0D4F8B 30%, #0D4F8B 100%), -webkit-linear-gradient(top, rgba(13, 79, 139, 0.5) 0, rgba(13, 79, 139, 0.5) 40%, rgba(255, 255, 255, 0.01) 50%, rgba(13, 79, 139, 0.5) 60%, rgba(13, 79, 139, 0.5) 100%); background-image: linear-gradient(to right, #0D4F8B 0, #0D4F8B 22.5%, rgba(13, 79, 139, 0.25) 27.5%, #0D4F8B 30%, #0D4F8B 100%), linear-gradient(to bottom, rgba(13, 79, 139, 0.5) 0, rgba(13, 79, 139, 0.5) 40%, rgba(255, 255, 255, 0.01) 50%, rgba(13, 79, 139, 0.5) 60%, rgba(13, 79, 139, 0.5) 100%); background-size: 400% 100%, 100% 100%; background-repeat: no-repeat; background-position: right center, center center; -webkit-background-clip: text; background-position: center center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-text-fill-color: transparent;
}
.hover:hover { background-position: left center, center center;
}
Laser Hover Effect - Script Codes
Laser Hover Effect - Script Codes
Home Page Home
Developer James Steinbach
Username jdsteinbach
Uploaded November 05, 2022
Rating 3
Size 2,354 Kb
Views 20,240
Do you need developer help for Laser Hover Effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Steinbach (jdsteinbach) Script Codes
Name
Animated Form Focus
Moving Polygons
Swinging Door Menu
Using a gradient for a border
Sass Geometric Pattern Generator
A Pen by James Steinbach
Parallax-ish Sliding Content
Flip Card
Slip-Scroll - No JS
LOTR-ish Ring
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!