Design team layout using css3

After very long back, I share with you team layout design using css3 (not included JavaScript & jQuery). In the currents day we all want to create our team page in our business or portfolio website. Because our clients want to know who your team members is and how much he/she experts in his/her works. So, I create awesome team layout using HTML and CSS3 which is helpful to create your team page.

Disclaimer: I used images from my LinkedIn connections for describing team layout only. If anyone has any concern for showing their images or content than please comment below or inbox me at designer.sanjayjadon@gmail.com

“Our Team Page” is very useful to website design and inspiration for web interface.

Features:

  • 9 different styles
  • Pure CSS effects
  • Fully Responsive
  • Easy to implement

 

Here is single example if you want quick try and use. Try it

HTML –

<div class="single-member effect-3">
  <div class="member-image">
    <img src="http://usingcss3.com/wp-content/uploads/2016/06/dmytro_smirnov_php_developer.jpg" alt="Member">
  </div>
  <div class="member-info">
    <h3>Dmytro Smirnov</h3>
    <h5>PHP Developer</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="social-touch">
      <a class="fb-touch" href="#"></a>
      <a class="tweet-touch" href="#"></a>
      <a class="linkedin-touch" href="#"></a>
    </div>
  </div>
</div>

CSS –

.single-member{
  width: 280px; 
  float: left; 
  font-family: sans-sarif; 
  margin: 30px 2.5%; 
  background-color: #fff; 
  text-align: center; 
  position: relative;
}
.member-image img{
  max-width: 100%; 
  vertical-align: middle;
}
h3 {
  font-size: 24px; 
  font-weight: normal; 
  margin: 10px 0 0; 
  text-transform: uppercase;
}
h5 {
  font-size: 16px; 
  font-weight: 300; 
  margin: 0 0 15px; 
  line-height: 22px;
}
p {font-size: 14px; 
  font-weight: 300; 
  line-height: 22px; 
  padding: 0 30px; 
  margin-bottom: 10px;
}
.social-touch a{
  display: inline-block; 
  width: 27px; 
  height: 26px; 
  vertical-align: middle; 
  margin: 0 2px; 
  background-image: url(images/social-icons.png); 
  background-repeat: no-repeat; 
  opacity: 0.7; 
  transition: 0.3s;
}
.social-touch a:hover{
  opacity: 1; 
  transition: 0.3s;
}
.fb-touch{
  background-position: 0 0;
}
.tweet-touch{
  background-position: -35px 0;
}
.linkedin-touch{
  background-position: -71px 0;
}
.icon-colored .fb-touch{
  background-position: 0 -27px;
}
.icon-colored .tweet-touch{
  background-position: -35px -27px;
}
.icon-colored .linkedin-touch{
  background-position: -71px -27px;
}
.effect-3{
  max-height: 302px; 
  min-height: 302px; 
  overflow: hidden;
}
.effect-3 h3{
  padding-top: 7px; 
  line-height: 33px;
}
.effect-3 .member-image{
  border-bottom: 5px solid #e5642b; 
  transition: 0.4s; 
  height: 212px; 
  width: 100%; 
  display: inline-block; 
  float: none; 
  vertical-align: middle;
}
.effect-3 .member-info{
  transition: 0.4s;
}
.effect-3 .member-image img{
  width: 100%; 
  vertical-align: bottom;
}
.effect-3 .social-touch{
  background-color: #e5642b; 
  float: left; 
  left: 0; 
  bottom: 0; 
  overflow: hidden; 
  padding: 5px 0; 
  width: 100%; 
  transition: 0.4s;
}
.effect-3:hover .member-image{
  border-bottom: 0; 
  border-radius: 0 0 50px 50px; 
  height: 81px; 
  display: inline-block; 
  overflow: hidden; 
  width: 109px; 
  transition: 0.4s;
}

Output –

input focus output

One comment
  1. Nice post .. i was looking for some different kind of hover effects, i stumble on your side and my search is over thanks …

Add Comment

Required fields are marked *. Your email address will not be published.