Эффект-прозрачности

div.masked { 
  background: no-repeat url(https://i.stack.imgur.com/3q67w.gif?s=32&g=1), wheat; 
  width: 100px; 
  height: 100px; 
  margin: 10px; 
  display: inline-block; 
  text-align: center; 
  line-height: 100px; 
  font-size: 30px; 
} 
 
div.masked:before { 
  content: ''; 
  display: block; 
  width: 100px; 
  height: 100px; 
  background-color: rgba(255,255,255,0.5); 
  position: absolute; 
  z-index: 100; 
  transition: 300ms; 
  cursor: pointer; 
} 
 
div.masked:hover:before { 
  background-color: transparent; 
}

<div class="masked">hover</div> 
<div class="masked">on</div> 
<div class="masked">me</div>

body { 
  background: #333; 
} 
 
.parent { 
  background: white; 
  position: relative; 
  width: 250px; 
  height: 150px; 
} 
 
.child { 
  cursor: pointer; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform-origin: center; 
  transform: translate(-50%, -50%); 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
  background: #009688; 
  opacity: .5; 
  transition: opacity .3s ease; 
} 
 
.child:hover { 
  opacity: 1; 
}

<div class='parent'> 
  <div class='child'></div> 
</div>