"Team Section Hover Effect Using HTML and CSS" is a creative and visually appealing technique used to enhance the presentation of team members or staff profiles on a website. It utilizes HTML and CSS to create dynamic hover effects that bring life and interactivity to the team section.
This design concept focuses on creating an engaging user experience by animating the team members' profiles when the user hovers over them. The hover effect highlights the individual team member, providing additional information or visual feedback to grab the user's attention.
To implement the team section hover effect, HTML is used to structure the team members' profiles. Each team member is typically represented by a container element, such as a <div>, that contains their photo, name, and job title. This structure can be repeated for each team member, creating a cohesive and organized layout.
CSS is then employed to style and animate the team member profiles. Various CSS properties and selectors are utilized to achieve the desired visual effects. For instance, when the user hovers over a team member, CSS transitions and transforms can be applied to animate the profile.
The hover effect can involve various transformations, such as scaling, rotating, or translating the profile elements. These transformations can create a visually appealing and dynamic effect that distinguishes the selected team member from others. Additionally, CSS properties like opacity, background color, or box-shadow can be adjusted to further enhance the hover effect and create a sense of interaction.
Furthermore, CSS pseudo-classes, such as :hover and :before, can be utilized to target specific elements within the team member profiles. This allows for more precise and customized animations when the user interacts with the team section. For example, the team member's name or job title can fade in or slide into view when hovered over.
By combining these HTML and CSS techniques, a team section hover effect can be created that adds visual interest and interactivity to the website. It enables users to easily identify and focus on individual team members, while also providing additional information or visual cues that enhance the overall user experience.
In conclusion, "Team Section Hover Effect Using HTML and CSS" leverages the power of HTML's structure and CSS's styling and animation capabilities to create engaging and interactive team member profiles. By applying dynamic hover effects, it adds a touch of creativity and interactivity to the team section, improving user engagement and enjoyment on the website.
HTML CODE
<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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
* {
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;
}
Comments
Post a Comment