JSFiddle - React, Tailwind, and code Playground

by wZVanG

HTML

<div class="box1">Box1</div>
<img class="img_hover_effect" />

<div class="box2">Box2</div>
<img class="img_hover_effect2" />

<div class="box3">Box3</div>
<img class="img_hover_effect3" />

CSS

div{height:20px;background:green; margin:10px}
img{width:100px;height:100px; background:tomato; display:none}

JavaScript

for(var i = 1; i <= 3; i++){
    (function(num){
        $('.box' + num).hover(function() {
            $('.img_hover_effect' + (num == 1 ? "" : num)).fadeIn(500);
        }, function(){
            $('.img_hover_effect' + (num == 1 ? "" : num)).fadeOut(400);
        });
    })(i);
}