"benzene-structure"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container benzene-structure"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="col-md-6 no-padding"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> <div class="col-md-6 no-padding"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> </div> <div class="col-md-10 col-md-offset-1"> <div class="middle row"> <div class="col-md-4 no-padding middle-left"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> <div class="col-md-4 no-padding"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> <div class="col-md-4 no-padding middle-right"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> </div> </div> <div class="col-md-6 col-md-offset-3 bottom"> <div class="col-md-6 no-padding"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> <div class="col-md-6 no-padding"> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="content"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> <div class="flip-card-back"> <img src="https://via.placeholder.com/280x280" alt="Avatar" style="width:300px;height:300px;"> </div> </div> </div> </div> </div> </div> </div>
.no-padding { padding: 0px; } .benzene-structure .middle { margin-right: 10px; margin-left: 33px; position: relative; top: -55px; } .benzene-structure .bottom { position: relative; top: -110px; } .benzene-structure .middle-left { position: relative; left: 23px; } .benzene-structure .middle-right { position: relative; right: 23px; } .benzene-structure .flip-card { background-color: transparent; width: 277px; height: 277px; -webkit-perspective: 1000px; perspective: 1000px; -webkit-clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%); clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%); } .benzene-structure .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .benzene-structure .flip-card-inner .content { position: absolute; width: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .benzene-structure .flip-card:hover .flip-card-inner { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .benzene-structure .flip-card-front, .benzene-structure .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%); clip-path: polygon(50% 0%, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%); } .benzene-structure .flip-card-front { background-color: #bbb; color: black; } .benzene-structure .flip-card-back { background-color: #2980b9; color: white; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .benzene-structure .flip-card-back img { width: 150px !important; height: auto !important; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

Related: See More


Questions / Comments: