title: What is this technique called in css?
body: <p>Default image:</p>
  
  <p><a href="https://i.stack.imgur.com/X9Gl7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9Gl7.jpg" alt="1"></a></p>
  
  <p>After uploading via using <code>dropzone.js</code>, hovering it:</p>
  
  <p><a href="https://i.stack.imgur.com/5TTwC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5TTwC.png" alt="2"></a></p>
  
  <p>When I create a custom image with css <code>opacity: 0.5</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/BERBq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BERBq.png" alt="3"></a></p>
  
  <p>It looks different from the second image. How to make image effecting like the second image via using css (not including text)?</p>