JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<span id="show_image"></span>

<span id="bilderliste">
<span id="bild1"><img src="http://placehold.it/350x150"></span>
<span id="bild2"><img src="http://placehold.it/350x150"></span>       
<span id="bild3"><img src="http://placehold.it/350x150"></span>
<span id="bild4"><img src="http://placehold.it/350x150"></span>
<span id="bild5"><img src="http://placehold.it/350x150"></span>
<span id="bild6"><img src="http://placehold.it/350x150"></span>    
</span>

CSS

span#show_image{  
    display: block;
}

span#bilderliste{
    max-height: 400px;
    overflow: auto;
}

.big_image{
    border: 1px solid red;    
}

span[id^='bild']{
    display: block;
    padding-bottom: 10px;   
}

JavaScript

$("span[id^='bild'] img").on("mouseover",function(){
    var image = $(this).attr("src");
    var parent = $(this).parent().attr("id");
    $("span#show_image").html('<img class="big_image" src="'+image+'&text='+parent+'">');
});