<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="speakers" id="speakers"> <div class="container"> <div class="section-heading"> <h1>Speakers</h1> <p class="lead">Lorem ipsum dolor sit amet</p> </div> <div class="row"> <div class="col-md-4 speaker wow fadeInDown animated" data-wow-delay="1s" data-wow-animation-name="none" style="visibility: visible; -webkit-animation-delay: 1s; -webkit-animation-name: none;"> <div class="speaker-img"> <img src="http://gelevanog.com/bevent/min/assets/img/speakers/1.jpg" alt=""> <a href="" class="speaker-contacts left-top"><i class="fa fa-google-plus fa-2x"></i></a> <a href="" class="speaker-contacts left-bottom"><i class="fa fa-facebook fa-2x"></i></a> <a href="" class="speaker-contacts right-bottom"><i class="fa fa-twitter fa-2x"></i></a> <a href="" class="speaker-contacts right-top"><i class="fa fa-envelope fa-2x"></i></a> </div> <div class="speaker-desc"> <p>Tyler Durden</p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div> <div class="col-md-4 speaker wow fadeInDown animated" data-wow-delay="1.1s" data-wow-animation-name="none" style="visibility: visible; -webkit-animation-delay: 1.1s; -webkit-animation-name: none;"> <div class="speaker-img"> <img src="http://gelevanog.com/bevent/min/assets/img/speakers/2.jpg" alt=""> <a href="" class="speaker-contacts left-top"><i class="fa fa-google-plus fa-2x"></i></a> <a href="" class="speaker-contacts left-bottom"><i class="fa fa-facebook fa-2x"></i></a> <a href="" class="speaker-contacts right-bottom"><i class="fa fa-twitter fa-2x"></i></a> <a href="" class="speaker-contacts right-top"><i class="fa fa-envelope fa-2x"></i></a> </div> <div class="speaker-desc"> <p>Harry Callahan</p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div> <div class="col-md-4 speaker wow fadeInDown animated" data-wow-delay="1.2s" data-wow-animation-name="none" style="visibility: visible; -webkit-animation-delay: 1.2s; -webkit-animation-name: none;"> <div class="speaker-img"> <img src="http://gelevanog.com/bevent/min/assets/img/speakers/3.jpg" alt=""> <a href="" class="speaker-contacts left-top"><i class="fa fa-google-plus fa-2x"></i></a> <a href="" class="speaker-contacts left-bottom"><i class="fa fa-facebook fa-2x"></i></a> <a href="" class="speaker-contacts right-bottom"><i class="fa fa-twitter fa-2x"></i></a> <a href="" class="speaker-contacts right-top"><i class="fa fa-envelope fa-2x"></i></a> </div> <div class="speaker-desc"> <p>Amelie Poulain</p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div> </div> <div class="row"> <div class="col-md-4 speaker wow fadeInDown animated" data-wow-delay="1s" data-wow-animation-name="none" style="visibility: visible; -webkit-animation-delay: 1s; -webkit-animation-name: none;"> <div class="speaker-img"> <img src="http://gelevanog.com/bevent/min/assets/img/speakers/4.jpg" alt=""> <a href="" class="speaker-contacts left-top"><i class="fa fa-google-plus fa-2x"></i></a> <a href="" class="speaker-contacts left-bottom"><i class="fa fa-facebook fa-2x"></i></a> <a href="" class="speaker-contacts right-bottom"><i class="fa fa-twitter fa-2x"></i></a> <a href="" class="speaker-contacts right-top"><i class="fa fa-envelope fa-2x"></i></a> </div> <div class="speaker-desc"> <p>Mal Reynolds</p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div> <div class="col-md-4 speaker wow fadeInDown animated" data-wow-delay="1.1s" data-wow-animation-name="none" style="visibility: visible; -webkit-animation-delay: 1.1s; -webkit-animation-name: none;"> <div class="speaker-img"> <img src="http://gelevanog.com/bevent/min/assets/img/speakers/5.jpg" alt=""> <a href="" class="speaker-contacts left-top"><i class="fa fa-google-plus fa-2x"></i></a> <a href="" class="speaker-contacts left-bottom"><i class="fa fa-facebook fa-2x"></i></a> <a href="" class="speaker-contacts right-bottom"><i class="fa fa-twitter fa-2x"></i></a> <a href="" class="speaker-contacts right-top"><i class="fa fa-envelope fa-2x"></i></a> </div> <div class="speaker-desc"> <p>Samantha Baker</p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div> <div class="col-md-4 speaker wow fadeInDown animated" data-wow-delay="1.2s" data-wow-animation-name="none" style="visibility: visible; -webkit-animation-delay: 1.2s; -webkit-animation-name: none;"> <div class="speaker-img"> <img src="http://gelevanog.com/bevent/min/assets/img/speakers/6.jpg" alt=""> <a href="" class="speaker-contacts left-top"><i class="fa fa-google-plus fa-2x"></i></a> <a href="" class="speaker-contacts left-bottom"><i class="fa fa-facebook fa-2x"></i></a> <a href="" class="speaker-contacts right-bottom"><i class="fa fa-twitter fa-2x"></i></a> <a href="" class="speaker-contacts right-top"><i class="fa fa-envelope fa-2x"></i></a> </div> <div class="speaker-desc"> <p>George Bailey</p> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div> </div> </div> </div> </div>

/************************************************ *** speakers *** ************************************************/ .speakers { padding: 60px 0; } .speakers .section-heading { text-align: center; } .speakers .section-heading h1 { margin-top: 0; } .speakers .speaker:hover .speaker-contacts.left-top { left: 0; top: 0; } .speakers .speaker:hover .speaker-contacts.left-bottom { left: 0; bottom: 0; } .speakers .speaker:hover .speaker-contacts.right-bottom { right: 0; bottom: 0; } .speakers .speaker:hover .speaker-contacts.right-top { right: 0; top: 0; } .speakers .speaker:hover .speaker-img img { border-color: #555555; } .speakers .speaker-img { width: 70%; padding: 30px; margin: 0 auto; position: relative; text-align: center; } .speakers .speaker-img img { -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; border-radius: 50%; padding: 10px; border: 1px solid #eeeeee; display: inline-block; max-width: 100%; height: auto; position: relative; z-index: 2; } .speakers .speaker-contacts { text-decoration: none; color: #555555; background-color: #ffffff; border: 1px solid #555555; width: 50px; height: 50px; border-radius: 50%; position: absolute; display: block; text-align: center; z-index: 1; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .speakers .speaker-contacts i { line-height: 50px; } .speakers .speaker-contacts.left-top { left: 50%; top: 50%; } .speakers .speaker-contacts.left-bottom { left: 50%; bottom: 50%; } .speakers .speaker-contacts.right-bottom { right: 50%; bottom: 50%; } .speakers .speaker-contacts.right-top { right: 50%; top: 50%; } .speakers .speaker-desc { text-align: center; padding: 0 20% 20px; } .speakers .speaker-desc p { font-size: 18px; margin-top: 10px; }