Image overlay effect using HTML and CSS.
This is a very simple web
program; In this program we have shown image overlay effect
on an Image . As we hover on image then we will find some
kind of animation there . You will really love this WEB program.
PROGRAM SOURCE CODE : -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Image Overlay Effect</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.main-div{
width: 100vw;
height: 100vh;
display: grid;
place-items:center;
background-color: #9922e5;
}
.center-div{
width: 60%;
height: 70%;
box-shadow: 0 .25rem .5rem #001 ,0 .55rem .5rem #001;
position: relative;
overflow:hidden;
}
.center-div img{
width: 100%;
height: 100%;
object-fit: cover;
}
.before{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: crimson;
text-align: center;
color: #fff;
font-family: sans-serif;
transform: translateX(-100%);
transition: all .5s ease-in-out;
z-index: 1;
}
.before h1{
text-transform: uppercase;
margin-top: 7rem;
letter-spacing: .25rem;
}
.before h3{
text-transform: capitalize;
line-height: 5rem;
letter-spacing: .2rem;
}
.center-div img:hover~.before{
transform: translateX(0);
}
</style>
</head>
<body>
<div class="main-div">
<div class="center-div">
<img src="a.jpeg">
<div class="before">
<h1>The Anny</h1>
<h3>He is Anny our Web-Developer,Programmer and Coder</h3>
</div>
</div>
</div>
</body>
</html>
OUTPUT :-
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )
