.hexo {
height: 70px;
width: 250px;
margin-left: 40px;
border-top: 4px solid #000;
border-bottom: 4px solid #000;
position: relative;
text-align: center;
color: #f6922d;
line-height: 70px;
font-size: 20px;
font-family: sans-serif;
}
.hexo:before,
.hexo:after {
content: '';
position: absolute;
top: 13px;
height: 40px;
width: 40px;
border: 4px solid #000;
-webkit-transform: scale(0.8, 1.25) rotate(45deg);
-moz-transform: scale(0.8, 1.25) rotate(45deg);
-ms-transform: scale(0.8, 1.25) rotate(45deg);
transform: scale(0.8, 1.25) rotate(45deg);
}
.hexo:before {
left: -22px;
border-top: 0px solid transparent;
border-right: 0px solid transparent;
}
.hexo:after {
right: -22px;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
}
div .comment {
display: none;
}
div:hover .hexo {
display: none;
}
div:hover .comment {
display: inline;
}
.comment {
font-size: 15px;
text-align: center;
}
<div>
<div>
<div class="hexo">Application Development</div>
<div class="comment">Gathering requirements, designing prototypes, testing, implementation, and integration is what we perform</div>
</div>
<div>
<div class="hexo">Application Development</div>
<div class="comment">Gathering requirements, designing prototypes, testing, implementation, and integration is what we perform
</div>
</div>