JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div id="homage-wrap">
    <img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="object01 clickobject" />
    <img src="http://assets.dwell.com/sites/default/files/2012/11/01/karel-martens-profile-rectangle.jpg" class="object02 clickobject" />
    <!-- <div id="page-wrap"> -->
    <div class="objectTitles">
        <div class="object01 objectTitle">TITLETEXT</div>
        <div class="object02 objectTitle">TITLETEXT</div>
    </div>
    <div class="objectInformations">
        <div class="object01 objectInformation">INFORMATION img1</div>
        <div class="object02 objectInformation">INFORMATION img2</div>
    </div>
</div>
<!-- END | homage-wrap -->

CSS

/* Reset */
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	    margin: 0;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
	    font: inherit;
	    vertical-align: baseline;
	    text-decoration: none;
	    color: #333;
	    -webkit-margin-before: 0;
	    -webkit-margin-after: 0;
	    -webkit-margin-start: 0px;
	    -webkit-margin-end: 0px;
	    -webkit-padding-start: 0px;
	}
	/* Master */
	html, body {
	    width:100%;
	    height:100%;
	}
	/* Wrap */
	#homage-wrap {
	    width: 80%;
	    max-width: 48em;
	    margin: 0 auto;
	    padding-top: 69.5px;
	}
	
	/* objects */
	.object01 {
	    top: 0;
	    left: 0;
	}
	.object02 {
	    bottom: 0;
	    right: 0;
	}
	/* Image */
	.clickobject {
	    width: 400px;
	    height: auto;
	    position: absolute;
	}
	/* Title Text */
	.objectTitles {
	    float: left;
	    width: 49%;
	    margin-right: 2%;
	}
	/* Title Body */
	.objectInformations {
	    float: right;
	    width: 49%;
	    margin-right: 0;
	}

JavaScript

$(document).click(function () {
    reset();
});
jQuery('.objectTitles .objectTitle').fadeOut("slow");
jQuery('.objectInformations .objectInformation').fadeOut("slow");

// jQuery('.clickobject').on('click', function () {
jQuery('.clickobject').click(function () {

    var imgNumber = jQuery(this).attr("class").replace('clickobject', '');
    jQuery('.objectTitles .objectTitle').hide(); //hide all image Titles
    jQuery('.objectTitles .objectTitle.' + imgNumber).fadeIn("slow"); //show title for e.g. img1    
    jQuery('.objectInformations .objectInformation').hide();
    jQuery('.objectInformations .objectInformation.' + imgNumber).fadeIn("slow");

    jQuery('.clickobject').css('opacity', '1');
    jQuery('.clickobject:not(.' + imgNumber + ')').css('opacity', '0.3');
});