title: hide a transparent :before div on hover
body: <p>I have a div that displays an image and then has a half height semi transparent block on which I write text. This is done using some code from this site that utilizes "before". How do I hide this transparent block on hover? I've tried all I can think of. I can't use a standard transparent image because the image is different on each instance of the div and they aren't on site. The use of :before in this way is not something I fully understand but suspect it is complicating matters.</p>
  
  <pre><code>.summary_props_trans {
     position: relative; 
     font-family:'Melbourne', Arial, sans-serif;
     font-size: 2vmin;
     color: black;
     font-weight:normal;
     z-index: 0;  
     width: 220px;
     height: 165px;
     margin: 5px;
     float: left;
     padding: 5px 10px 10px 5px;  
     background-repeat: no-repeat;
     background-size:cover;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
  }
  
  .summary_props_trans:hover {
     filter:alpha(opacity=80);  
     -moz-opacity:0.8;  
     -khtml-opacity: 0.8;  
     opacity: 0.8; 
  }
  
  .summary_props_trans:before{
     content:''; 
     display: block;
     position: absolute; 
     background: white; 
     opacity: .5;
     filter:alpha(opacity=50);
     top: 0; right: 0; bottom: 0; left: 0;
     margin: 0px 0px 50px 0px;
     z-index: -1;
  }
  </code></pre>