Team Section Hover Effect HTML & CSS

Team Section Hover Effect

A team plays a vital role in any business organization. A team can consist of individuals with diverse skills and expertise who work together towards a common goal or objective. The primary role of a team in a business organization is to achieve a set of objectives that are aligned with the overall goals of the organization.

HTML:

<div class="main">
<section class="team">
<div class="img">
<center>
<img src="img1.png">
<h2>Balvinder Kumar</h2>
<p>Programming guru</p>
</center>
</div>
<div class="content">
<p>Glavi amet ritnisl libero molestie ante ut fringilla
purus eros quis glavrid from iquam
</p>
<center>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
</center>
</div>
</section>
<section class="team">
<div class="img">
<center>
<img src="img3.png">
<h2>Mary Brown</h2>
<p>Web Designer</p>
</center>
</div>
<div class="content">
<p>Glavi amet ritnisl libero molestie ante ut fringilla
purus eros quis glavrid from iquam.
</p>
<center>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
</center>
</div>
</section>
</div>
<!-- logo script link -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

CSS:

* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
border: none;
outline: none;
text-decoration: none;
}
body {
width: 100%;
height: 100vh;
background: #212121;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
}
.team {
width: 400px;
height: 150px;
background: #1a1a1a;
border-radius: 10px;
transition: .8s;
cursor: pointer;
}
.img {
width: 100%;
height: 200px;
background-color: #eee;
border-radius: 10px;
}
.content {
width: 0%;
height: 0%;
background-color: black;
margin: auto;
margin-top: 40px;
border-radius: 10px;
transition: .8s;
}

.team:hover .content {
width: 80%;
height: 300px;
}
.team:hover {
height: 500px;
box-shadow: 0 0 10px #5e548e,
0 0 15px #5e548e,
0 0 10px #5e548e,
0 0 10px #5e548e;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.img img {
width: 200px;
height: 200px;
margin-top: -20%;
border-radius: 50%;
}
.img h2 {
font-size: 30px;
padding: 5px 0;
}
.img p {
font-size: 20px;
font-weight: 500;
}
.content p {
color: #eee;
padding: 50px;
text-align: center;
font-size: 20px;
line-height: 25px;
opacity: 0;
display: none;
letter-spacing: 2px;
}
.team:hover .content p {
opacity: 1;
display: block;
}
.team .content ion-icon {
float: left;
font-size: 30px;
color: #eee;
padding: 10px;
opacity: 0;
display: none;
border-radius: 10px;
}
.team .content ion-icon:nth-child(1) {
margin-left: 30px;
}
.team:hover .content ion-icon {
opacity: 1;
display: block;
}
.content ion-icon:hover {
background: #eee;
color: #1a1a1a;
}
.main{
width: 100%;
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
}

#website #websitetemplate #sidebar #navigation #menu #sourcecode #html #css #web