#1336 - Profile Card

1336-profile-card.markdown

#1336 - Profile Card

Profile card with image, title and caption

A Pen by Kehinde Ayanleye on CodePen.

License.

index.html

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/10662/thumb_kingsley.jpg" alt="profile-sample4" class="profile" />
    <h2>Kingsley</h2>
    <p><span>Strengths</span>Tech Savvy, UI/UX Design</p>
    <p><span>Interests</span>Design, Arduino, Content Writing</p>
    <p><span>Roles</span>UI/UX Designer, Digital Marketer</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/15140/thumb_Screenshot__21_.png" alt="profile-sample4" class="profile" />
    <h2>Makinde</h2>
    <p><span>Strengths</span>Graphic Designs</p>
    <p><span>Interests</span>Designs</p>
    <p><span>Roles</span>Graphics Designer, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/13008/thumb_wonuade_facebook1.jpg" alt="profile-sample4" class="profile" />
    <h2>David</h2>
    <p><span>Strengths</span>Business and Market Operations</p>
    <p><span>Interests</span>Business/Market and Politics</p>
    <p><span>Roles</span>Business Development, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/13166/thumb_DSC_0708.JPG" alt="profile-sample4" class="profile" />
    <h2>Duisor</h2>
    <p><span>Strengths</span>Media, Public Relations</p>
    <p><span>Interests</span>Radio Presenting, Public Relations</p>
    <p><span>Roles</span>Social Media, Public Relations, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/14659/thumb_feyi.jpeg" alt="profile-sample4" class="profile" />
    <h2>Feyisayo</h2>
    <p><span>Strengths</span>PR, Excellent communicative abilities (Verbal, Non-verbal)</p>
    <p><span>Interests</span>Marketing and Advertising</p>
    <p><span>Roles</span>Marketing, Sales, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/13281/thumb_IMG_20150913_173553.jpg" alt="profile-sample4" class="profile" />
    <h2>Charles</h2>
    <p><span>Strengths</span>Website Design and Content Management</p>
    <p><span>Interests</span>Technology, Entrepreneurship</p>
    <p><span>Roles</span>Web Designer, Digital Marketer</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/10573/thumb_10496999_742429735803275_8093546034962835595_o.jpg" alt="profile-sample4" class="profile" />
    <h2>Sheun</h2>
    <p><span>Strengths</span>Research, Presentation</p>
    <p><span>Interests</span>Photography, Music, Sports</p>
    <p><span>Roles</span>Content Development, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/13608/thumb_IMG_20150419_00142715.jpg" alt="profile-sample4" class="profile" />
    <h2>Alexander</h2>
    <p><span>Strengths</span>Auto CAD, Teamwork, Engineering</p>
    <p><span>Interests</span>Sports, Volunteering</p>
    <p><span>Roles</span>Engineering roles, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/15568/thumb_image.jpeg" alt="profile-sample4" class="profile" />
    <h2>Bolanle</h2>
    <p><span>Strengths</span>Communication, Research, Teamwork</p>
    <p><span>Interests</span>Fashion, Photography, Politics</p>
    <p><span>Roles</span>Customer Relations, Business Development, Digital Marketing</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

<figure class="snip1336">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
  <figcaption>
    <img src="https://stutern.s3.amazonaws.com/uploads/student_profile/image/13669/thumb_133758_1401106362787_5026360_o.jpg" alt="profile-sample4" class="profile" />
    <h2>Festus</h2>
    <p><span>Strengths</span>Programming, Teamwork<p>
    <p><span>Interests</span>StartUps, New Technologies, Sports</p>
    <p><span>Roles</span>Programmer, Web Developer, Digital Markerter, Tutor</p>
    <a href="#" class="follow">Follow</a>
    <a href="#" class="info">More Info</a>
  </figcaption>
</figure>

script.js

/* Demo purposes only */
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);
.snip1336 {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #141414;
}
.snip1336 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1336 img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.snip1336 figcaption {
  width: 100%;
  background-color: #141414;
  padding: 25px;
  position: relative;
}
.snip1336 figcaption:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #141414;
}
.snip1336 figcaption a {
  padding: 5px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.7em;
  text-transform: uppercase;
  margin: 10px 0;
  display: inline-block;
  opacity: 0.65;
  width: 47%;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
}
.snip1336 figcaption a:hover {
  opacity: 1;
}
.snip1336 .profile {
  border-radius: 5%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1336 .follow {
  margin-right: 4%;
  border-color: #2980b9;
  color: #2980b9;
}
.snip1336 h2 {
  margin: 0 0 5px;
  font-weight: 300;
}
.snip1336 p {
  margin: 0 0 10px;
  font-size: 0.8em;
  letter-spacing: 1px;
  opacity: 0.8;
}
.snip1336 span {
  margin-top:15px;
  display: block;
  font-size: 1em;
  color: #2980b9;
}
/* Demo purposes only */
body {
  background-color: #212121;
}