Border animation on hover ( Source Code )

Border animation on hover ( Source Code )

add font-awesome cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">


HTML


<div class="wrapper"> <div class="section-header"> <h2> Our Team Members</h2> </div> <div class="team-member"> <img src="images/2.jpg" alt=""> <h3> John Doe</h3> <p> UI / UX Designer</p> <p> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> </p> </div> <div class="team-member"> <img src="images/3.jpg" alt=""> <h3> John Doe</h3> <p> UI / UX Designer</p> <p> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> </p> </div> <div class="team-member"> <img src="images/4.jpg" alt=""> <h3> John Doe</h3> <p> UI / UX Designer</p> <p> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> </p> </div> </div>


CSS


body{ background: #3B4172; font-family: poppins; } .wrapper{ width: 1170px; margin: 2% auto; } .section-header{ text-align: center; margin-bottom: 40px; } .section-header h2 { text-transform: uppercase; margin: 0; color: #fff; font-size: 45px; letter-spacing: 5px; } .team-member { width: 29%; height: auto; float: left; box-shadow: 5px 5px 15px #000; position: relative; display: block; overflow: hidden; padding: 15px; text-align: center; margin: 0 5px; background: #222859; } .team-member img { width: 100%; } .team-member h3 { margin: 0; text-transform: uppercase; font-size: 25px; color: #fff; } .team-member p { color: #fff; } .team-member p i { color: #D04F81; margin: 0 6px; font-size: 25px; } .team-member:before { position: absolute; content: ''; left: 0; bottom: 0; height: 4px; width: 100%; border-bottom: 4px solid transparent; border-left: 4px solid transparent; box-sizing: border-box; transform: translateX(100%); } .team-member:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 4px; border-top: 4px solid transparent; border-right: 4px solid transparent; box-sizing: border-box; transform: translateX(-100%); } .team-member:hover:before { border-color: #D04F81; height: 100%; transform: translateX(0); transition: .3s transform linear, .3s height linear .3s; } .team-member:hover:after { border-color: #D04F81; height: 100%; transform: translateX(0); transition: .3s transform linear .3s, .3s height linear .5s; }