CodePen

HTML

            
              <p>Works on white bg only:</p>
<div class="image_method">translucent 1px gif gets removed on hover</div>
<p>Works on white bg only:</p>
<div class="shadow_method">similar but removes a box-shadow on hover</div>
<p>Works on everything:</p>
<div class="before_method">background created as psuedo-element and it's opacity changes on hover</div>
            
          
!
via HTML Inspector

CSS

            
              div{
  width:100px;
  height:100px;
}

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}
.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................