Home / css / Team Page elements in Hexagon shape with hover using Bootstrap

Team Page elements in Hexagon shape with hover using Bootstrap

LIVE DEMO

 CODE

  • HTML
  • Style.css
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
        <link rel="stylesheet" href="style.css" >
       
    </head>
<body>
  
    <div class="container">
      <div class="row">
        <div class="col-md-4">
              <div class="wrapper">
                     <div class="hshape1 hshape2 "><div class="hshape-inner1"><div class="hshape-inner2 fimage">
                        <div class="centre">
                            <div class="contentm">John Doe</div>
                        </div>
                      
                     </div></div></div>
                     
               </div>
          </div>
        
        <div class="col-md-4">
              <div class="wrapper">
                     <div class="hshape1 hshape2 "><div class="hshape-inner1"><div class="hshape-inner2 simage">
                        <div class="centre">
                            <div class="contentm">John Doe</div>
                        </div>
                      
                     </div></div></div>
                     
               </div>
          </div>

       <div class="col-md-4">
              <div class="wrapper">
                     <div class="hshape1 hshape2 "><div class="hshape-inner1"><div class="hshape-inner2 timage">
                        <div class="centre">
                            <div class="contentm">John Doe</div>
                        </div>
                      
                     </div></div></div>
                     
               </div>
          </div>

      
      </div>
    </div>

</body>
</html>

 

html,
body {
  height: 100%;
  font-family: 'Montserrat';
}

body {
 
  background: linear-gradient(45deg, #FF4E50 0%, #f9d423 100%);
    background: -moz-linear-gradient(45deg, #FF4E50 0%, #f9d423 100%);
    background: -webkit-linear-gradient(45deg, #FF4E50 0%, #f9d423 100%);
}
.wrapper{
  position: relative;
}

.centre {
  opacity: 0;
  transition: .2s ease-in;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
}

.contentm {
  background-color: #f9d423;
  color: white;
  font-size: 15px;
  padding: 10px 20px;
}

        
        
 .hshape1 {
   margin: 25px auto;
   overflow: hidden;
   visibility: hidden;
     /* position: absolute;
       top: calc(-400px/2);
           left: calc(50% - 100px); */
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
    }
.hshape-inner1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
     -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hshape-inner2 {
   border: 4px solid red;
    width: 100%;
    height: 100%;
    
    background-repeat: no-repeat;
    background-position: 100%;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.fimage{
    
    background-image: url("7.jpg");
}
.simage{
    
    background-image: url("7.jpg"); 
}
.timage{
    
    background-image: url("7.jpg");
}


.hshape-inner2:hover .centre {
  opacity: 1;
}
.hshape2 {
    width: 250px;
    height: 400px;
   
}

 

Check Also

WebsiteFooter

Perfect Footer for your website using Bootstrap and Fontawesome

Perfect Footer for your website using Bootstrap and Fontawesome Even though Footer is located at …

Leave a Reply

Your email address will not be published. Required fields are marked *