JSFiddle - React, Tailwind, and code Playground

HTML

<div class="xxx active"><img src="http://mywishlist.ru/pic/i/wish/orig/006/372/981.jpeg"></div>
<div class="xxx active"><img src="http://mywishlist.ru/pic/i/wish/orig/006/372/981.jpeg"></div>
<div class="xxx active"><img src="http://mywishlist.ru/pic/i/wish/orig/006/372/981.jpeg"></div>
<div class="xxx active"><img src="http://mywishlist.ru/pic/i/wish/orig/006/372/981.jpeg"></div>

CSS

.xxx {
  position: relative;
}
.xxx:before {
  opacity: 0;
  position: absolute;
  margin: 0;
  padding: 0;
  content: "не смотреть, если нет 18 лет";
  font-size: 30px;
  color: red;
  top: 20%;
  left: 20%;
  display: block;
}

.xxx.active:before {
  opacity: 1;
}

.xxx.active img {
  opacity: .05;
}

JavaScript

;(function () {

var xxx = document.getElementsByClassName("xxx");
	
  for (var i=xxx.length; i--;) {
  
        xxx[i].addEventListener('click', function(){
        
        	this.classList.toggle('active');
        
        }, false);
  }

})();