Bootstrap snippet: Creative Member Area

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: member



<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="creative-member-area fix"> <div class="container"> <!-- section-heading start --> <div class="row"> <div class="col-md-12"> <div class="section-heading fadeInUp animated"> <h2>OUR CREATIVE <strong>MEMBER</strong></h2> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy <br> with my whole heart. I am alone, and feel the charm of existence in this spot, which was created</p> </div> </div> </div> <!-- section-heading end --> <div class="row"> <!-- single-creative-member start --> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="single-creative-member fadeInUp animated"> <div class="member-photo"> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt=""> </div> <div class="member-info"> <span class="member-name">Elvera Faulkner</span> <span class="member-role">Developer</span> </div> <div class="member-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="52px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve"><path d="M51.673,0H0v51.5c0.244-5.359,3.805-10.412,7.752-13.003l36.169-23.74c4.264-2.799,7.761-8.663,7.752-14.297V0L51.673,0z"></path></svg> </div> </div> </div> <!-- single-creative-member end --> <!-- single-creative-member start --> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="single-creative-member fadeInUp animated"> <div class="member-photo"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""> </div> <div class="member-info"> <span class="member-name">Cherri Portnoy</span> <span class="member-role">Programmer</span> </div> <div class="member-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="52px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve"><path d="M51.673,0H0v51.5c0.244-5.359,3.805-10.412,7.752-13.003l36.169-23.74c4.264-2.799,7.761-8.663,7.752-14.297V0L51.673,0z"></path></svg> </div> </div> </div> <!-- single-creative-member end --> <!-- single-creative-member start --> <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> <div class="single-creative-member fadeInUp animated"> <div class="member-photo"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt=""> </div> <div class="member-info"> <span class="member-name">Jorge Mincey</span> <span class="member-role">Designer</span> </div> <div class="member-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52px" height="52px" viewBox="0 0 52 52" enable-background="new 0 0 52 52" xml:space="preserve"><path d="M51.673,0H0v51.5c0.244-5.359,3.805-10.412,7.752-13.003l36.169-23.74c4.264-2.799,7.761-8.663,7.752-14.297V0L51.673,0z"></path></svg> </div> </div> </div> <!-- single-creative-member end --> </div> </div> </div>
body{ background:#eee; } /*------------------------------ 8. creative-member-area --------------------------------*/ img { max-width: 100%; height: auto; } .creative-member-area { padding: 160px 0; } .creative-member-area .section-heading { text-align: center; margin-bottom: 70px; } .creative-member-area .section-heading h2 { color: #000; } .single-creative-member { position: relative; } .member-photo { border-radius: 10px 0 10px 10px; margin-right: 52px; overflow: hidden; position: relative; transform: translateZ(0px); } .member-photo::before { background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 0.3s ease 0s; width: 100%; } .single-creative-member:hover .member-photo:before{opacity:1} .member-photo::after { background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0; bottom: 0; content: ""; height: 50%; left: 0; position: absolute; width: 100%; } .member-photo img{} .member-info { background: transparent none repeat scroll 0 0; bottom: 0; color: #fff; margin-right: 50px; padding: 25px; position: absolute; z-index: 999; } .member-info .member-name { display: block; font-size: 1.2em; margin-bottom: 0.2em; } .member-info .member-role { display: block; font-size: 0.9em; margin-bottom: 0; opacity: 0.5; } .member-icons { background-color: #2bcdc0; border-radius: 0 10px 0 0; padding: 15px 0 0; position: absolute; right: 0px; top: 0; width: 52px; } .member-icons a { color: #fff; display: inline-block; font-size: 18px; line-height: 52px; margin: 0; text-align: center; text-decoration: none; width: 100%; } .member-icons a i { font-size: 18px; padding-bottom: 15px; width: 25px; } .member-icons svg { border-top: 1px solid #eee; position: absolute; right: 0; top: 100%; } .member-icons svg path{fill: #2bcdc0;}
Dey-Dey

Creative Member Area

Dey-Dey
  Sep 14th, 13:29
1.8K Views