<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="content"> <div class="container"> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb40 text-center"> <h1>Director List</h1> </div> </div> <div class="row"> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <!-- team-img --> <div class="team-block"> <div class="team-img"> <img src="https://easetemplate.com/free-website-templates/motion/images/team_member_1.jpg" alt=""> <div class="team-content"> <h4 class="text-white mb0">Eliza Simon</h4> <p class="team-meta">- Producer</p> </div> <div class="overlay"> <div class="text"> <h4 class="mb0 text-white">Eliza Simon</h4> <p class="mb30 team-meta">- Producer</p> <p>Mauris tincidunt dolor eget diam dapibus vitae finibusnisl friuisque pretiuam egete euismod justam ac temlibern rutrum nisli in mi rhoncac pharetra odioacin ntesque dictum vel risus quis egeaecenas necese purus quaroin tincidunt neque malesuda vulputate lecton pretiume.</p> </div> </div> </div> </div> </div> <!-- /.team-img --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <!-- team-img --> <div class="team-block"> <div class="team-img"> <img src="https://easetemplate.com/free-website-templates/motion/images/team_member_2.jpg" alt=""> <div class="team-content"> <h4 class="text-white mb0">Gerald Ferguson</h4> <p class="team-meta">- Creative Director</p> </div> <div class="overlay"> <div class="text"> <h4 class="mb0 text-white">Gerald Ferguson</h4> <p class="mb30 team-meta">- Creative Director</p> <p>Mauris tincidunt dolor eget diam dapibus vitae finibusnisl friuisque pretiuam egete euismod justam ac temlibern rutrum nisli in mi rhoncac pharetra odioacin ntesque dictum vel risus quis egeaecenas necese purus quaroin tincidunt neque malesuda vulputate lecton pretiume.</p> </div> </div> </div> </div> </div> <!-- /.team-img --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <!-- team-img --> <div class="team-block"> <div class="team-img"> <img src="https://easetemplate.com/free-website-templates/motion/images/team_member_3.jpg" alt="" class="img-fluid"> <div class="team-content"> <h4 class="text-white mb0">William Murphy</h4> <p class="team-meta">- Project Manager</p> </div> <div class="overlay"> <div class="text"> <h4 class="mb0 text-white">William Murphy</h4> <p class="mb30 team-meta">- Project Manager</p> <p>Mauris tincidunt dolor eget diam dapibus vitae finibusnisl friuisque pretiuam egete euismod justam ac temlibern rutrum nisli in mi rhoncac pharetra odioacin ntesque dictum vel risus quis egeaecenas necese purus quaroin tincidunt neque malesuda vulputate lecton pretiume.</p> </div> </div> </div> </div> </div> <!-- /.team-img --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <!-- team-img --> <div class="team-block"> <div class="team-img"> <img src="https://easetemplate.com/free-website-templates/motion/images/team_member_4.jpg" alt="" class="img-fluid"> <div class="team-content"> <h4 class="text-white mb0">Barbara Cook</h4> <p class="team-meta">- Producer</p> </div> <div class="overlay"> <div class="text"> <h4 class="text-white mb0">Barbara Cook</h4> <p class="mb30 team-meta">- Producer</p> <p>Mauris tincidunt dolor eget diam dapibus vitae finibusnisl friuisque pretiuam egete euismod justam ac temlibern rutrum nisli in mi rhoncac pharetra odioacin ntesque dictum vel risus quis egeaecenas necese purus quaroin tincidunt neque malesuda vulputate lecton pretiume.</p> </div> </div> </div> </div> </div> <!-- /.team-img --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <!-- team-img --> <div class="team-block"> <div class="team-img"> <img src="https://easetemplate.com/free-website-templates/motion/images/team_member_5.jpg" alt="" class="img-fluid"> <div class="team-content"> <h4 class="text-white mb0">Derek Bybee</h4> <p class=" mb30 team-meta">- Creative Director</p> </div> <div class="overlay"> <div class="text"> <h4 class="text-white mb0">Derek Bybee</h4> <p class=" mb30 team-meta">- Creative Director</p> <p>Mauris tincidunt dolor eget diam dapibus vitae finibusnisl friuisque pretiuam egete euismod justam ac temlibern rutrum nisli in mi rhoncac pharetra odioacin ntesque dictum vel risus quis egeaecenas necese purus quaroin tincidunt neque malesuda vulputate lecton pretiume.</p> </div> </div> </div> </div> </div> <!-- /.team-img --> <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12"> <!-- team-img --> <div class="team-block"> <div class="team-img"> <img src="https://easetemplate.com/free-website-templates/motion/images/team_member_6.jpg" alt="" class="img-fluid"> <div class="team-content"> <h4 class="text-white mb0">Lucille Webster</h4> <p class=" mb30 team-meta">- Cinematographer + Steadicam Operator</p> </div> <div class="overlay"> <div class="text"> <h4 class="text-white mb0">Lucille Webster</h4> <p class="team-meta">- Cinematographer + Steadicam Operator</p> <p>Mauris tincidunt dolor eget diam dapibus vitae finibusnisl friuisque pretiuam egete euismod justam ac temlibern rutrum nisli in mi rhoncac pharetra odioacin ntesque dictum vel risus quis egeaecenas necese purus quaroin tincidunt neque malesuda vulputate lecton pretiume.</p> </div> </div> </div> </div> </div> <!-- /.team-img --> </div> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center"> Created for <a href="https://goo.gl/xKhzsz" target="_blank">easetemplate</a> </div></div> </div> </div> </div>

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Lato', sans-serif; letter-spacing: 0px; font-size: 16px; color: #62686c; font-weight: 400; line-height: 28px; } h1, h2, h3, h4, h5, h6 { font-weight: 300; color: #11181f; margin: 0px 0px 15px 0px; font-family: 'Lato', sans-serif; } h1 { font-size: 44px; } h2 { font-size: 38px; } h3 { font-size: 24px; font-weight: 400; } h4 { font-size: 20px; font-weight: 400; line-height: 30px; } h5 { font-size: 16px; font-weight: 400; } h6 { font-size: 12px; font-weight: 400; } p { margin: 0 0 20px; line-height: 1.7; } p:last-child { margin: 0px; } ul, ol { } a { text-decoration: none; color: #62686c; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:focus, a:hover { text-decoration: none; color: #f67800; } .content{padding-top:80px; padding-bottom:80px;} .mb40{margin-bottom:40px;} .team-block { margin-bottom: 20px; } .team-content { position: absolute; background-color: rgba(17, 24, 31, 0.8); bottom: 0px; display: inline-block; width: 100%; color: #fff; padding: 30px; } .team-img { position: relative; } .team-img img { width: 100%; } .team-title { } .team-meta { color: #9da4aa; font-weight: 400; font-size: 16px; } .overlay { border-radius: 0px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 1s ease; background-color: #11181f; } .team-img:hover .overlay { opacity: .8; } .team-img:hover .team-content { opacity: 0; } .text { color: #fff; position: absolute; top: 30%; left: 30%; transform: translate(-26%, -26%); -ms-transform: translate(-26%, -26%); right: 0; font-weight: 400; font-size: 16px; }