<div id="aaa"> </div>

#aaa {
    background: url('/Images/aaa.png')no-repeat;
    position: absolute;
    top: 9px;
    left: 294px;
    z-index: 10;
    height: 128px;
    width: 110px;
}

#aaa:hover {
    background: url('/Images/aaa-hover.png')no-repeat;
    position: absolute;
    top: -7px;
    left: 279px;
    z-index: 10;
    height: 166px;
    width: 143px;
}

<div id="hexagon"> </div>

    #hexagon {
        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
    #hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
    #hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }