JSFiddle - React, Tailwind, and code Playground

by edddotcom

HTML

<div class="container">
    <div class="row">
        <img class="mid" src="http://icons.iconarchive.com/icons/artua/mac/512/Earth-icon.png" alt="1"/>
        <img class="mid" src="http://www.sxc.hu/pic/m/g/g-/g-point/1155571_earth_3d.jpg" alt="2"/>
        <img class="mid" src="http://www.funtimegifts.co.uk/media/STOCKIMG/00068476.JPG" alt="3"/>
    </div>
    <div id="main" class="hidden">
        <img id="mainimg" />
        <p id="maintxt1" >This text is for image 1 - 3D Earth</p>
        <p id="maintxt2" >This text is for image 2 - Satellite Earth</p>
        <p id="maintxt3" >This text is for image 3 - Puzzle Earth</p>
        <p id="test"></p>
    </div>
</div>

CSS

.large{
    padding-left: 10px;
    padding-right: 10px;
    width: 100px;
    
}
.mid{
    width: 100px;
}
.container{
    display:block;
    text-align:center;
    width:500px;
    overflow:hidden;
}
.row{
    display:inline-block;
    height:120px;
    width:350px;
    
}
.hidden{
    display:none;
}
.visible{
    display:block;
    width:100%;
    height: 200px;
    overflow:hidden;
}
.imgvisible{
    width:200px;
    float:left;
}
.txtvisible{
    width:280px;
    float:left;
    overflow-y:auto;
    text-align:justify;
    max-height:200px;
}

JavaScript

$(document).ready(function() {
    $(".row > img").hover(function() {
        $(this).toggleClass("mid large");
    });
    $(".row > img").click(function(){
        $("#main").addClass("visible");
        $("#mainimg").addClass("imgvisible");
        $("#mainimg").attr("src",this.src);
        var $input=$(this);
        var i=$input.attr("alt");
        var idtemp="#maintxt"+i;
        $("#main > p").not(idtemp).hide();
        $(idtemp).show();
        $(idtemp).addClass("txtvisible");
        
    });
});