Background image opacity with hover CSS

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;
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


Html changes are not updating

Did a silly mistake when I updated a MVC website the other day. I did some css and html changes but that didn’t seem to be updated when I hit F5 in the browser. It only become updated when I did a rebuild in Visual Studio, really frustrating and I spent nearly 1 hour to figure out what was wrong.
At last I found what was causing this. It was beacause it was a OutputCache directive on the action in the controller that cached all the content.

Sometimes the answers are really simple if you know where to look.. =)