JSFiddle - React, Tailwind, and code Playground

HTML

<div class="summary_props_trans">abcs</div>

CSS

.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;
    background:#ccc;
}

 .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 10px 0px;
z-index: -1;
}
    .summary_props_trans:hover:before {
      filter:alpha(opacity=0);  
      -moz-opacity:0;  
      -khtml-opacity: 0;  
      opacity: 0; 
    }