JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<div style="position:relative; width:208px; height:30px;">
    <div class="menuItemBG"></div>
    <div class="menuItemTitle">Test Item</div>
 </div>

CSS

.menuItemBG {
    width:100%;
    text-align: center;
    background-color:#4281b6;
    height:100%;

    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: alpha(opacity=10);
    opacity:.1;
    position: absolute;
}
.menuItemBG:hover {
    width:100%;
    text-align: center;
    background-color:#4281b6;
    height:100%;

    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    opacity:.2;
    position: absolute;
}
.menuItemTitle{
    position:absolute;
    color:#000;
    line-height: 27px;
    font-size: 14px;
    margin-left: 20px;
}