JSFiddle - React, Tailwind, and code Playground
HTML
<div class="left2">
<img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="http://supergrassrecords.com/wp-content/uploads/cover_21501720102005.jpg" />
<img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="http://www.progarchives.com/progressive_rock_discography_covers/2106/cover_48161614112005.jpg" />
<img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="http://cdnm.tutorialchip.com/wp-content/uploads/2012/05/RAHAEL-Book-Cover-Design-200x200.jpg">
<img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="http://www.mclub.com.ua/images/alb/cover29_10544.jpg" />
<img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="http://www.band-brand.com/wp-content/uploads/2011/06/music-album-cover.jpg" />
<img class="miniimg" onmouseover="show(this);" onmouseout="hide(this);" alt="art" src="http://upload.wikimedia.org/wikipedia/ru/d/d9/200px-Enigma_LSD_Remix_cover.jpg" />
</div>
<div id="fullsize" class="content"></div>
CSS
.left2 {
border:1px solid black;
text-align:left;
margin-left:30px;
float:left;
width:50px;
min-height:450;
max-height:550px;
text-align:center;
overflow:auto;
}
.content {
border:1px solid black;
display: none;
text-align:left;
float:left;
height:200px;
padding: 3px;
margin:25px 0px 20px 50px;
width:200px;
}
.miniimg {
margin-top:3px;
max-width:70%;
height:auto;
border:1px solid black;
}
JavaScript
function show(img) {
var fullsize = document.getElementById("fullsize");
fullsize.style.display = "block";
fullsize.innerHTML = "<img class='bigimg' src='" + img.src + "' alt='fullsize' width='200' height='200' />";
}
function hide(img) {
var fullsize = document.getElementById("fullsize");
fullsize.style.display = "none";
fullsize.innerHTML = "";
}