Simple CSS overlay

Developer
Luna Eye
Size
1,744 Kb
Views
50,600
  1. Simple CSS overlay Previews
  2. Simple CSS overlay HTML Codes
  3. Simple CSS overlay CSS Codes

How do I make an simple css overlay?

What is a simple css overlay? How do you make a simple css overlay? This script and codes were developed by Luna Eye on 16 October 2022, Sunday.

Simple CSS overlay Previews
IQ Test

Simple CSS overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS overlay</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure class=""> <a href="#" class="zoom-hover"> <img src="http://placehold.it/350x150"> <div class="zoom-hover-overlay"> </div> </a>
</figure>
</body>
</html>

Simple CSS overlay - Script Codes CSS Codes

body { padding: 2em;
}
figure { position: relative;
}
figure img { width: 100%;
}
.zoom-hover { line-height: 0; display: inline-block; position: relative; max-width: 100%;
}
.zoom-hover>.zoom-hover-overlay { background-color: rgba(86,26,89,0.75);
}
.zoom-hover>.zoom-hover-overlay { transition: opacity 0.5s linear; opacity: 0; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;
}
.zoom-hover>.zoom-hover-overlay>.zoom-hover-title-container { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
}
.zoom-hover:hover>.zoom-hover-overlay { opacity: 1;
}
Simple CSS overlay - Script Codes
Simple CSS overlay - Script Codes
Home Page Home
Developer Luna Eye
Username lunaman
Uploaded October 16, 2022
Rating 3
Size 1,744 Kb
Views 50,600
Do you need developer help for Simple CSS overlay?

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!

Luna Eye (lunaman) Script Codes
Name
Toggle button
Lifecycle
Nth-of-type testing
Benefits definition - VPO
Right arrow shape
Business Led Change
Project management UX
Bourbon overlay
JQuery Validate checkbox group
Multiple YouTube modals
Create amazing art & images 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!