This is one of the simple overlay effect using pure css. This is very commonly used all over the websites. Lot of web programmers they are using this overlay effect to attract the customers.This is also nice effect, this type of effect mostly used to the gallery section on over the image the overlay effect will show along with title of the image.
This simple effects used for the various section of the websites like Clients, People page design, Gallery page design, Clients Page design, Portfolio design and etc. In this example have this type of effects, Here is a full source code and demo page visit those pages. I hope this post is useful.
This simple effects used for the various section of the websites like Clients, People page design, Gallery page design, Clients Page design, Portfolio design and etc. In this example have this type of effects, Here is a full source code and demo page visit those pages. I hope this post is useful.
Source Code for Set Overlay effect to image along with text using pure css
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.6;
transition: .5s ease;
background-color: #000;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Overlay effect using css</h2>
<div class="container">
<img src="overlay-effect-css.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">www.sanwebcorner.com</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.6;
transition: .5s ease;
background-color: #000;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Overlay effect using css</h2>
<div class="container">
<img src="overlay-effect-css.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">www.sanwebcorner.com</div>
</div>
</div>
</body>
</html>
0 Comments