JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img2 clickImage">

<div class="imageTitles">
    <div class="img1 imgTitle">TITLETEXT</div>
    <div class="img2 imgTitle">TITLETEXT</div>
</div>

<div class="imageInformations">
    <div class="img1 imgInformation">INFORMATION img1</div>
    <div class="img2 imgInformation">INFORMATION img2</div>
</div>

CSS

.img1.clickImage, .img2.clickImage, .imgTitle, imgInformation { position:absolute; }


.img1.clickImage, .img2.clickImage { width:200px; height:auto; z-index:50; }
.img1.clickImage { top:20px; left:20px; }
.img2.clickImage { bottom:20px; right:20px; }

.img1.imgTitle, .img2.imgTitle { top: 30px; width: 400px; height: 400px; z-index:100; }
.img1.imgInformation, .img2.imgInformation { top: 40px; width: 400px; height: 400px; z-index:100; }

JavaScript

jQuery('.clickImage').on('click', function() {
    var imgNumber = jQuery(this).getClass().replace('clickImage', '');
    jQuery('imageTitles .imgTitle').hide(); //hide all image Titles
    jQuery('imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1

    //repeat this for imgInformation
});