In this quick tutorial I will show you how to design team member area in a different way. And also will add a nice hover effect with that using simple CSS.
Add this class name for each member inner section
team_member
Then use this CSS code
:root{
--color: red;
--border_width: 4px;
--height: 85px;
--time: 1s;
}
selector:before{
content: "";
width: var(--border_width);
height: var(--height);
background: var(--color);
position: absolute;
right: 0;
z-index: 0;
transition:var(--time);
}
.team_member:hover selector:before{
width: 110%;
}
0 Comments