Hover Overlay Project

Developer
Lan Le
Size
1,701 Kb
Views
14,168
  1. Hover Overlay Project Previews
  2. Hover Overlay Project HTML Codes
  3. Hover Overlay Project CSS Codes

How do I make an hover overlay project?

What is a hover overlay project? How do you make a hover overlay project? This script and codes were developed by Lan Le on 20 November 2022, Sunday.

Hover Overlay Project Previews
IQ Test

Hover Overlay Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Overlay Project</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="box"> <div id="overlay"> <p id="description">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> <button>Read more</button> </div>
</div>
</body>
</html>

Hover Overlay Project - Script Codes CSS Codes

#box{ width:400px; height:400px; border: 5px solid black; background: url("http://hdqwalls.com/wallpapers/gidget-the-secret-life-of-pets.jpg"); background-size: 400px;
}
#overlay{ background:rgba(0,0,0, 0.75); height:100%; opacity:0;
}
#overlay:hover{ opacity:1;
}
#description{ display: inline-block; color:white; padding-top:100px; padding-left: 50px; padding-right:50px;
}
button{ margin-left:150px;
}
Hover Overlay Project - Script Codes
Hover Overlay Project - Script Codes
Home Page Home
Developer Lan Le
Username lanlengoc97
Uploaded November 20, 2022
Rating 3
Size 1,701 Kb
Views 14,168
Do you need developer help for Hover Overlay Project?

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!

Lan Le (lanlengoc97) Script Codes
Name
Colorful Grid
The Tic Tac Toe Game 2.0
A Pen by Lan Le
Profile
Money Converter
Diversity Tag Project
Profile page
Entries
Digital Clock
Tic Tac Toe Game
Create amazing blog posts 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!