Hexagon grid with border and image - css

Question

I am trying to achieve the image bellow:
I can do a hexagon border and text but I have no idea how to add the hexagon image and to do the grid of 3 hexagons.
Any help will be highly appreciate. If here is more elegant way using clip-path of SVG please help.
Here is my code:
HTML
<div class="container">
<div class="row">
<div class="col-3 col-6-medium col-12-small">
<div class="hexagon">
<div class="text">
<h3>Head of Trust & Safety,Video Streaming Platform</h3>
<p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
</div>
</div>
</div>
<div class="col-3 col-6-medium col-12-small">
<div class="hexagon">
<div class="text">
<h3>Head of Trust & Safety,Video Streaming Platform</h3>
<p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
</div>
</div>
</div>
<div class="col-3 col-6-medium col-12-small">
<div class="hexagon">
<div class="text">
<h3>Head of Trust & Safety,Video Streaming Platform</h3>
<p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
</div>
</div>
</div>
</div>
</div>
CSS
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #ffffff;
margin: 57.74px 0;
border-left: solid 2px #4850be;
border-right: solid 2px #4850be;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 27.2893px;
}
.hexagon:before {
top: -70.7107px;
border-top: solid 2.8284px #4850be;
border-right: solid 2.8284px #4850be;
}
.hexagon:after {
bottom: -70.7107px;
border-bottom: solid 2.8284px #4850be;
border-left: solid 2.8284px #4850be;
}

Answer 1

So basically i have done it the same way, like u did before..
You could try a solution like this:
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #ffffff;
margin: 57.74px 0;
border-left: solid 2px #4850be;
border-right: solid 2px #4850be;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
z-index: 1;
width: 141.42px;
height: 141.42px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 27.2893px;
/* NEW */
z-index:1;
}
.hexagon:before {
top: -70.7107px;
border-top: solid 2.8284px #4850be;
border-right: solid 2.8284px #4850be;
}
.hexagon:after {
bottom: -70.7107px;
border-bottom: solid 2.8284px #4850be;
border-left: solid 2.8284px #4850be;
}
/* NEW */
.icon-box {
width: 70px;
height: 30px;
background-color: orange;
position: absolute;
top:-35px;
left: 0;
right: 0;
margin: auto;
z-index: 10;
}
.icon-box:before,
.icon-box:after {
content: "";
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 0;
right: 0;
margin: auto;
background-color: orange;
z-index:1;
}
.icon-box:before {
top: -25px;
}
.icon-box:after {
bottom: -25px;
}
.icon-box i {
position: absolute;
left: 0;
right: 0;
bottom: -15px;
margin: 0 auto;
z-index: 20;
font-size: 50px;
width: 40px;
height: 40px;
text-align: center;
color: #fff;
}
/* JUST FOR DEMO PURPOSE */
.text {
z-index: 10;
position: relative;
font-size: 7px;
text-align: center;
padding: 20px;
}
.text h3 {
font-size: 8px;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-3 col-6-medium col-12-small">
<div class="hexagon">
<div class="icon-box"><i class="fa fa-user"></i></div>
<div class="text">
<h3>Head of Trust & Safety,Video Streaming Platform</h3>
<p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
</div>
</div>
</div>
<div class="col-3 col-6-medium col-12-small">
<div class="hexagon">
<div class="icon-box"><i class="fa fa-user"></i></div>
<div class="text">
<h3>Head of Trust & Safety,Video Streaming Platform</h3>
<p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
</div>
</div>
</div>
<div class="col-3 col-6-medium col-12-small">
<div class="hexagon">
<div class="icon-box"><i class="fa fa-user"></i></div>
<div class="text">
<h3>Head of Trust & Safety,Video Streaming Platform</h3>
<p>"ActiveFence is the foundation of our proactive moderation efforts. It's easy to show that there is no in-house equivalent we could ever develop. Even the best internal teams will never have ActiveFence's subject matter and linguistic expertise, and the cross platform visibility their technology provides is invaluable to keeping our users safe." </p>
</div>
</div>
</div>
</div>
</div>
(i added bootstrap and fontawesome, for demonstration purpose..)

Answer 2

I managed to sort it out. Here is my different way:
#content-middle {
position: relative;
width: 100%;
min-height: 100vh;
margin: 0 auto;
overflow: hidden;
}
#content-middle::before {
top: 0;
height: 100%;
background: #f4f4f6;
-webkit-clip-path: polygon(0 46%, 0% 100%, 54% 100%);
clip-path: polygon(0 46%, 0% 100%, 54% 100%);
z-index: -1;
}
#content-middle::before, #content::after {
content: "";
position: absolute;
left: 0;
width: 100%;
}
.hexWrapper {
text-align: center;
margin: 0px;
position: relative;
display: inline-block;
width: 150px; /*Change this to resize*/
height: 150px; /*Change this to resize*/
min-width: 150px;
min-height: 150px;
float:left;
}
.hexagon {
height: calc(100%/1.732050807);
width: 100%;
background-color: #ffffff;
display:inline-block;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
background-color: inherit;
height: inherit;
width: inherit;
left: -1px; right: -1px; top: 0; bottom: 0;
}
.hexagon:before {
transform: rotateZ(60deg);
}
.hexagon:after {
transform: rotateZ(120deg);
}
.hexagon,
.hexagon:before,
.hexagon:after {
box-sizing: content-box;
border: solid 2px #4850be;
border-top-width: 0;
border-bottom-width: 0;
z-index: -1; /*We need to force the z-index so we can put some text over*/
}
#container{
padding-top: 60px;
width:100%;
min-width:910px; /* so the page doesn't get too small. This should be done better with media queries*/
}
.row-hexagon{
clear:both; /*to reset all the configs*/
float:left;
display: flex; /* using some flex to aline to center */
justify-content: center;
overflow:hidden; /*this is for after, when we add more hex's*/
padding-top:145px; /* To take care of the top part of the hex, needs changing if we change the size on the wrapper*/
position:relative;
}
.fullWidth{
width: 100%;
}
.icon-box{
width: 75px;
height:40px;
background-color: #4850be;
position: absolute;
top:-25px;
left: 0;
right: 0;
margin: auto;
z-index: 10;
}
.icon-box:before,
.icon-box:after{
content: "";
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background-color: inherit;
left: 0;
right: 0;
margin: auto;
background-color: #4850be;
z-index:1;
}
.icon-box:before {
top: -25px;
}
.icon-box:after {
bottom: -25px;
}
.icon-box i,
.icon-box img {
position: absolute;
left: 0;
right: 0;
bottom: -20px;
margin: 0 auto;
z-index: 20;
font-size: 90px;
width: 80px;
height: 80px;
text-align: center;
color: #fff;
}
.text {
z-index: 10;
position: relative;
font-size: 17px;
text-align: center;
padding: 20px;
}
.text h3 {
font-size: 1em;
color:#42c9c0;
font-weight:700;
}
.text h4{
font-size: 0.8em;
color:#42c9c0;
font-weight:300;
}
.text p{
font-size: 0.5em;
font-weight:300;
font-style:italic;
}
<!-- FonT Awesome for demo purposes here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<section id="content-middle">
<div id="container-hexagon">
<div class="row-hexagon fullWidth" id="firstRow">
<div class="hexWrapper">
<div class="hexagon">
<div class="icon-box"><i class="fa fa-user"></i></div>
<div class="text">
<h3>Title</h3>
<h4>Subtitle </h4>
<p>Text</p>
</div>
</div>
</div>
<div class="hexWrapper">
<div class="hexagon">
<div class="icon-box"><i class="fa fa-user"></i></div>
<div class="text">
<h3>Title</h3>
<h4>Subtitle </h4>
<p>Text</p>
</div>
</div>
</div>
<div class="hexWrapper">
<div class="hexagon">
<div class="icon-box"><i class="fa fa-user"></i></div>
<div class="text">
<h3>Title</h3>
<h4>Subtitle </h4>
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>