Team section with hover animation

byCodingFlicks -November 19, 2022

0

Hello friends. Today we will share with you another CSS animation examples snippet. Today we will create a team section design with a cool hover animation effect in it. Our website has many snippets of CSS tips and tricks. Visit them by clicking the Load More button on the homepage. Check out the video demo below to see what the snippet will look like.

Hope you have watched the video demo. Here we have designed a team section. Here basically we have shown the background color changes when hovering the team boxes. You can make your business more accessible by adding a team section to your web page. It gives visitors a good sense of who is on your team, and how capable they are. This will make your business more transparent to the visitor. We have made this snippet using HTML and CSS and background color animation was done by using the background-position property. Mind that this snippet is not responsive, as we wanted to show you the hover animation only.

Team section with hover animation [ Source Code ]:

Go ahead and create the required files like HTML and CSS. Please copy and paste the following code into them. To find out if the code is working, you need to check the browser.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Section with hover animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="card-area">
            <div class="box">
                <div class="img-area"></div>
                <div class="content">
                    <h2>Tom Woods</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id illum iusto nisi amet debitis</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="box">
                <div class="img-area"></div>
                <div class="content">
                    <h2>Chris Jordan</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id illum iusto nisi amet debitis</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="box">
                <div class="img-area"></div>
                <div class="content">
                    <h2>Sam Billings</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum id illum iusto nisi amet debitis</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
        </div>
            
    </div>
</body>
</html>

ADD CSS:

* {
    margin: 0;
    padding: 0;
  }
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .card-area {
	width: 1100px;
	display: flex;
	justify-content: space-around;
}
.box {
	width: 250px;
	height: 270px;
	text-align: center;
	border-radius: 30px;
	color: #fff;
	box-shadow: 0 18px 26px -5px rgba(0,0,0,0.5);
	padding: 25px 40px;
	background: linear-gradient(to left, #163a1e 50%, #ed9f4a 50%);
	background-size: 200%;
	background-position: right;
	transition: background-position 0.5s ease-out;
}
.img-area {
	width: 80px;
	height: 80px;
	background: url(https://images.pexels.com/photos/804009/pexels-photo-804009.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
	background-size: cover;
	margin: 0 auto 20px;
	border-radius: 50px;
	border: 5px solid #fff;
}
.content h2 {
	font-size: 30px;
	margin-bottom: 5px;
	font-family: titan one;
}
.content a {
	background: #fff;
	display: inline-block;
	text-decoration: none;
	margin-top: 15px;
	padding: 5px 15px;
	color: #262626;
	border-radius: 25px;
}
  .box:hover {
    background-position: left;
  }

I hope the code is working for you. You can get more snippets if you click the load more button. Please share the content with your friends. Thanks for visiting our website.

Please do not enter any spam link in the comment box.