Team
Daniel Tobok
President
Daniel Tobok
President
Ed Dubrovsky
Managing Director, Cyber Breach Response
Ed Dubrovsky
Managing Director, Cyber Breach Response
Jane Doe
Managing Director, Forensic Investigations
Jane Doe
Managing Director, Forensic Investigations
John Doe
Managing Director, Security Consulting
John Doe
Managing Director, Security Consulting
Matthew McCallum
Director, Cyber Breach Response
Matthew McCallum
Director, Cyber Breach Response
Ben Whittaker
Senior Manager, Cyber Breach Response
Ben Whittaker
Senior Manager, Cyber Breach Response
Mary Smith
Managing Director
Mary Smith
Managing Director
John Smith
Managing Director
John Smith
Managing Director
PHP
<?php
$team = array(
array('name' => 'Daniel Tobok', 'position' => 'President', 'img' => '/img/team_1.jpg'),
array('name' => 'Ed Dubrovsky', 'position' => 'Managing Director, Cyber Breach Response', 'img' => '/img/team_2.jpg'),
array('name' => 'Jane Doe', 'position' => 'Managing Director, Forensic Investigations', 'img' => '/img/team_3.jpg'),
array('name' => 'John Doe', 'position' => 'Managing Director, Security Consulting', 'img' => '/img/team.jpg'),
array('name' => 'Matthew McCallum', 'position' => 'Director, Cyber Breach Response', 'img' => '/img/team_4.jpg'),
array('name' => 'Ben Whittaker', 'position' => 'Senior Manager, Cyber Breach Response', 'img' => '/img/team_5.jpg'),
array('name' => 'Mary Smith', 'position' => 'Managing Director', 'img' => '/img/team_6.jpg'),
array('name' => 'John Smith', 'position' => 'Managing Director', 'img' => '/img/team.png')
);
?>
<section class="team">
<div class="wrapper">
<h1 class="tc">Team</h1>
<div class="team_wrap">
<?php foreach ($team as $item): ?>
<a href="#" class="team_item">
<div class="team_img">
<img src="<?= $item['img'] ?>" alt="<?= $item['name'] ?>">
</div>
<div class="team_shadow">
<div class="team_desc">
<p class="name"><?= $item['name'] ?></p>
<p class="position"><?= $item['position'] ?></p>
</div>
</div>
<div class="team_bottom">
<p class="name"><?= $item['name'] ?></p>
<p class="position"><?= $item['position'] ?></p>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
</section>CSS
.team_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -1.5rem 2rem}
.team_item{display:inline-block;width:-webkit-calc(100% / 4 - 3.01rem);width:-moz-calc(100% / 4 - 3.01rem);width:calc(100% / 4 - 3.01rem);margin:1.5rem;position:relative}
.team_item .team_img{display:block;padding-top:150%;overflow:hidden;position:relative;z-index:1}
.team_item .team_img img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-webkit-filter:grayscale(100%);filter:grayscale(100%);-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;\A '}
.team_item .team_shadow{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .35s;-o-transition:all .35s;-moz-transition:all .35s;transition:all .35s;background:rgba(0,0,0,.5);z-index:5}
.team_item .team_desc{display:inline-block;vertical-align:middle;width:100%;position:relative;top:65%;padding:1rem 3rem;font-size:1.4rem;font-weight:400;text-align:center}
.team_item .team_desc .name{font-size:3rem;font-weight:300;line-height:1.2;color:#fff;margin:0 0 .5rem}
.team_item .team_desc .position{font-size:1.2rem;font-weight:700;line-height:1.3;color:#f5821f;text-transform:uppercase;margin:0}
.team_item .team_bottom{position:absolute;bottom:0;left:0;background:#343434;-webkit-transition:all .35s;-o-transition:all .35s;-moz-transition:all .35s;transition:all .35s;opacity:0;width:100%;z-index:9;padding:.5rem 2rem .8rem}
.team_item .team_bottom .name{font-size:2rem;font-weight:300;line-height:1.2;color:#fff;margin:0 0 .2rem}
.team_item .team_bottom .position{font-size:1rem;line-height:1.3;font-weight:700;color:#f5821f;text-transform:uppercase;margin:0}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.team_item:hover .team_img img{-webkit-filter:grayscale(0);filter:grayscale(0)}
.team_item:hover .team_shadow{-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:0}
.team_item:hover .team_bottom{opacity:1}
}
@media only screen and (max-width: 1200px) {
.team_item .team_desc .name{font-size:2.4rem}
}
@media only screen and (max-width: 992px) {
.team_item{width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem)}
.team_item .team_img img{-webkit-filter:grayscale(0);filter:grayscale(0)}
.team_item .team_desc{-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:0}
.team_item .team_bottom{opacity:1}
}
@media only screen and (max-width: 767px) {
.team_item{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
}
@media only screen and (max-width: 550px) {
.team_item{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
.team_item:last-child{margin:1.5rem 1.5rem 0}
}SCSS
/* Vars */
$cb: #000000;
$white: #ffffff;
.team_wrap {
display: flex;
flex-wrap: wrap;
margin: 0 -1.5rem 2rem;
}
.team_item {
display: inline-block;
width: calc(100% / 4 - 3.01rem);
margin: 1.5rem;
position: relative;
.team_img {
display: block;
padding-top: 150%;
overflow: hidden;
position: relative;
z-index: 1;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
filter: grayscale(100%);
object-fit: cover;
font-family: 'object-fit: cover;';
}
}
.team_shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .35s;
background: rgba($cb, .5);
z-index: 5;
}
.team_desc {
display: inline-block;
vertical-align: middle;
width: 100%;
position: relative;
top: 65%;
padding: 1rem 3rem;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
.name {
font-size: 3rem;
font-weight: 300;
line-height: 1.2;
color: $white;
margin: 0 0 .5rem;
}
.position {
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
color: #f5821f;
text-transform: uppercase;
margin: 0;
}
}
.team_bottom {
position: absolute;
bottom: 0;
left: 0;
background: #343434;
transition: all .35s;
opacity: 0;
width: 100%;
z-index: 9;
padding: .5rem 2rem .8rem;
.name {
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
color: $white;
margin: 0 0 .2rem;
}
.position {
font-size: 1rem;
line-height: 1.3;
font-weight: 700;
color: #f5821f;
text-transform: uppercase;
margin: 0;
}
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.team_item:hover .team_img img {filter: grayscale(0);}
.team_item:hover .team_shadow {transform: scale(0);opacity: 0;}
.team_item:hover .team_bottom {opacity: 1;}
}
@media only screen and (max-width: 1200px) {
.team_item .team_desc .name {font-size: 2.4rem;}
}
@media only screen and (max-width: 992px) {
.team_item {width: calc(100% / 3 - 3.01rem);}
.team_item .team_img img {filter: grayscale(0);}
.team_item .team_desc {transform: scale(0);opacity: 0;}
.team_item .team_bottom {opacity: 1;}
}
@media only screen and (max-width: 767px) {
.team_item {width: calc(100% / 2 - 3.01rem);}
}
@media only screen and (max-width: 550px) {
.team_item {width: calc(100% / 1 - 3.01rem);}
.team_item:last-child {margin:1.5rem 1.5rem 0;}
}