<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="column active"> <img src="http://webiconspng.com/wp-content/uploads/2016/12/Handshake-Icon-PNG.png" alt="sasas" /> <h2><span>Tailered </span><span>Solution</span></h2> <span class="tri"></span> </div> <div class="column"> <img src="http://webiconspng.com/wp-content/uploads/2016/12/Handshake-Icon-PNG.png" alt="sasas" /> <h2><span>Tailered </span><span>Solution</span></h2> <span class="tri"></span> </div> <div class="column"> <img src="http://webiconspng.com/wp-content/uploads/2016/12/Handshake-Icon-PNG.png" alt="sasas" /> <h2><span>Tailered </span><span>Solution</span></h2> <span class="tri"></span> </div> <div class="column"> <img src="http://webiconspng.com/wp-content/uploads/2016/12/Handshake-Icon-PNG.png" alt="sasas" /> <h2><span>Tailered </span><span>Solution</span></h2> <span class="tri"></span> </div> <div class="column active"> <img src="http://webiconspng.com/wp-content/uploads/2016/12/Handshake-Icon-PNG.png" alt="sasas" /> <h2><span>Tailered </span><span>Solution</span></h2> <span class="tri"></span> </div> </div>

img{width:100%;} .column h2{ margin: 0; padding: 5px 0 0 0; font: 400 17px/18px "Roboto"; font-family: 'Roboto', sans-serif; color: #999; } .column h2 span{display:block;} .column{ width: 18%; float: left; text-align: center; border: 1px solid #ccc; padding: 10px 26px; margin: 0 1%; position:relative; } .column:hover{background: #e4955f;} .column.active{background: #e4955f;} .column.active h2{color:#fff} .column:hover .tri{display:block;} .column.active .tri{display:block;} .column:hover h2{color:#fff} .column .tri{width:0px;height:0px;position:absolute;border: 10px solid transparent;border-top: 10px solid #e4955f;content:"";left:50%;transform:translateX(-50%;)-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);bottom: -20px;display:none;}