Create a menu option with background image with only css. On hover change opacity for the background image. Without affecting the text color.
.mainMenu .option {
width: 374px;
height: 248px;
display: inline-block;
border: 1px solid #d0d0d0;
vertical-align: top;
margin: 2px 2px 2px 0;
transition: border 250ms ease;
text-align:center;
cursor:pointer;
position: relative;
}
.mainMenu .transbox {
background: #fff;
opacity: 0.75;
width: 100%;
height: 248px;
}
.mainMenu a {
color: #181818;
font-size: 30px;
display: inline-block;
text-shadow: 0 1px 1px #909090;
position: absolute;
top: 100px;
left: 0;
width: 100%;
}
.mainMenu div:hover .transbox {
opacity: 0.1;
color: #000
}