Hover Over Image

Developer
Hayden Mills
Size
1,692 Kb
Views
34,408
  1. Hover Over Image Previews
  2. Hover Over Image HTML Codes
  3. Hover Over Image CSS Codes

How do I make an hover over image?

What is a hover over image? How do you make a hover over image? This script and codes were developed by Hayden Mills on 14 August 2022, Sunday.

Hover Over Image Previews
IQ Test

Hover Over Image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Over Image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="img-list"> <li> <a href=""> <img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png" width="150" height="150" /> <span class="text-content"><span>Basketball</span></span> </a> </li>
</ul>
</body>
</html>

Hover Over Image - Script Codes CSS Codes

ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 150px;
margin: 0 1em 1em 0;
position: relative;
width: 150px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
Hover Over Image - Script Codes
Hover Over Image - Script Codes
Home Page Home
Developer Hayden Mills
Username haydenmills
Uploaded August 14, 2022
Rating 3
Size 1,692 Kb
Views 34,408
Do you need developer help for Hover Over Image?

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!

Hayden Mills (haydenmills) Script Codes
Name
Responsive fixed on scroll navigation menu
Responsive Fixed Navigation Overlay Menu
Fixed Nav Bar
Simple Buttons
CSS Text Drop Shadow
JQuery Text Fade In
Cool CSS Gradient Background
Responsive full body border
Top Menu Fixed After Image
Pop Out Modal
Create amazing marketing copy 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!