JSFiddle - React, Tailwind, and code Playground

HTML

<div id="typical-container">
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/100/100" />
</div>

JavaScript

//window.onload = function(){

var image = document.getElementsByTagName('img');

    for (var i = 0, ii = image.length; i < ii; i++)  {
        image[i].style.opacity = "0.5";
        image[i].addEventListener('mouseover', imageIn, 'false');
        image[i].addEventListener('mouseout', imageOut, 'false');   
    }

    function imageIn() {
    this.style.opacity = "1";   
    }

    function imageOut(i) {
        this.style.opacity = "0.5";
    }
//}