In an HTML designing layout, there are too many different types of CSS that HTML designers used for making their website looking good. So today I am just talking about Overlay CSS. Sometimes you stuck for making an overlay content, but I am sure after reading this blog post your issue will be solved.
Let’s start about overlay CSS-
There is simple technique for creating overlay –
Absolutely positioned:
This is the CSS which is needed to make an overlay effect.
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
Transparent Image Overlay –
The following CSS code shows how to transparent color overlay on images. Also, you can see how to overlay one div over another div.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flower{
width:320px;
height:240px;
background: url(img/tulip.jpg) no-repeat;
}
.flower .color{
position:relative;
top:0px;
width:320px;
height:240px;
background:#fff;
opacity:0;
}
.flower:hover .color
{
opacity:0.7;
}
</style>
</head>
<body>
White Overlay Image –
For adding white overlay just need to some changes in Code. See below –
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flower{
width:320px;
height:240px;
background: url(img/tulip.jpg) no-repeat;
}
.flower:hover{
width:320px;
height:240px;
background:#fff;
opacity:0.9;
}
</style>
</head>
<body>
Position one image on top of another –
The Below CSS code shows how to overlaying image on another image.
By use of this CSS, you can change the image after hovering on one image. This looks so cool.
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
.Overlay
{
width: 240px;
height: 240px;
background: url(imges/image1.jpg) no-repeat;
}
.Overlay:hover {
background: url(imges/image2.jpg) no-repeat;
}
</style>
</head>
<body>
For more overlay effects you can try w3schools image overlay technique.
Leave Your Comment Here