JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blendmode">
     <img src="http://www.maurice-web.de/blogbeispiele/weg.jpg"/>
  </div>
  
  <div class="zwei">
   
  </div>
  <div class="drei">
      <img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" />
  </div>

  <div class="vier">
 <img src="http://www.maurice-web.de/blogbeispiele/weg.jpg" />
  </div>

CSS

div {
  margin: 20px;
}

.blendmode {
  background-color: rgb(70, 155, 41);
  float: left;
  opacity: 0.99;
}
.blendmode:hover {
  background-color: rgba(255,255,255,.9)
  ;
}
.blendmode img { 
  mix-blend-mode: multiply; 
  display: block;
}
.zwei  {
  width: 300px;
  height:225px;
  float: left;
  background-image: 
        -webkit-linear-gradient(rgba(70, 155, 41, 0.5), rgba(70, 155, 41, 0.5)), 
		url(weg.jpg);
  background-image: 
        linear-gradient(rgba(70, 155, 41, 0.5), rgba(70, 155, 41, 0.5)), 
		url("http://www.maurice-web.de/blogbeispiele/weg.jpg");
}
.zwei:hover {
   background-image: url("http://www.maurice-web.de/blogbeispiele/weg.jpg");
}
.drei, .vier {
  position: relative;
  float: left;
}
.drei:after, .vier:after {
  content: "";
  background: rgba(70, 155, 41, 0.5);
  width: 300px;
  height: 225px;
  position: absolute;
  top:0;
  left: 0;
}
.drei:hover:after, .vier:hover:after {
   background:transparent;
}
.vier:after {
  background: -webkit-radial-gradient(rgba(70, 155, 41, 0.1) 30%, rgba(70, 155, 41, 0.9));
  background: radial-gradient(rgba(70, 155, 41, 0.1) 30%, rgba(70, 155, 41, 0.9));
}