Hover Effect With CSS
Team Page in HTML and CSS :-
An About page is a special web page on a site where your readers/visitors learn more about you and what you do. ... Often, this web page tells the story of the site owner's journey from struggling to finally achieving success (or vice versa).
Source Code :-
HTML :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Team</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center>
<h1>Our Team</h1>
<div class="main">
<div class="card">
<div class="imgbox">
<img src="1.jpg" alt="">
</div>
<div class="details">
<h2>UMESH</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book.</p>
</div>
</div>
<div class="card">
<div class="imgbox">
<img src="2.jpg" alt="">
</div>
<div class="details">
<h2>KUMAR</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book.</p>
</div>
</div>
<div class="card">
<div class="imgbox">
<img src="3.jpg" alt="">
</div>
<div class="details">
<h2>CHAMP</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book.</p>
</div>
</div>
</div>
</center>
</body>
</html>
CSS :-
body{
background-color: #17202a;
}
h1{
color: #fff;
display: inline-block;
padding-top: 40px;
border-bottom: 2px solid #228dff;
font-family: goudy stout regular;
font-size: 25px;
padding-bottom: 5px;
}
.main{
width: 80%;
height: 800px;
background-color: transparent;
margin-top: 50px;
}
.card{
display: inline;
float: left;
margin-left: 45px;
transform: translate(-0%, -0%);
width: 300px;
height: 400px;
background: #979797;
overflow: hidden;
border-radius: 130px 5px 130px 5px ;
-webkit-border-radius: 130px 5px 130px 5px;
border-bottom: 4px solid #228dff;
border-right: 4px solid #228dff;
box-shadow: 0px 0px 30px 5px rgba(34, 141, 255, 1);
}
.imgbox, .details{
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
transition: 0.6s;
}
.imgbox{
top: 0;
left: 0;
}
.imgbox img{
width: 100%;
height: 100%;
}
.card:hover .imgbox{
top: -100%;
left: 0;
}
.details{
top: 100%;
left: 0;
background: #222d35;
padding: 50px 30px;
}
.card:hover .details{
top: 0;
left: 0;
}
.details h2{
color: #228dff;
text-align: center;
text-transform: uppercase;
margin: 0;
padding: 0;
border-bottom: 2px solid #fff;
font-family: Forte Regular;
letter-spacing: 2px;
}
.details p{
margin: 20px 0 0;
color: #fff;
font-family: sans-serif;
font-size: 18px;
}
Comments
Post a Comment