"Awesome Team Page Design Overlay HTML"
Bootstrap 4.0.0 Snippet by Anita26

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard
Team Design Section with Pure CSS Effect
My Awesome Login Page
Simple & Clean 404 Error Page Design

Questions / Comments: