I've exhausted all my options and still can't crack this puzzle. Let me break it down for you:
Upon entering the page, users are greeted with a collection of images each tagged with classes (for example, img01 and img02). When an image is clicked, it stays in place (img01's z-index increases), while the rest fade away (a white fill DIV covers img02), accompanied by text detailing the piece (text fades in from the object-text tag associated with img01).
Although I managed to get the functionality working for img01, replicating the same for
img02</code has proved tricky. Additionally, I'm looking to introduce more tags like <code>img03img04 and exploring if there's a more efficient way to structure this.
If you need a reference for the functionality, here's the link: http://jsfiddle.net/kenhimself/nvwzgus0/4/. The HTML, CSS, and JavaScript code can be found below.
Thank you in advance!
HTML
<a href="#" id="object" class="img01"> <img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="object-text" class="img01">
<h1>img01 Text<br/>img01 Text</h1>
</div>
<a href="#" id="object" class="img02"> <img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="object-text" class="img02">
<h1>img02 Text<br/>img02 Text</h1>
</div>
<div id="filler"></div>
CSS
html, body {
width:100%;
height:100%;
}
#object {
top: 100px;
left:100px;
}
#object-text {
display:none;
z-index:100000;
bottom: 0;
left: 0;
}
#filler {
display:none;
width:100%;
height:100%;
position:fixed;
background-color: white;
z-index:1000;
opacity: 0.8;
}
h1 {
font-size:20px;
font-family: sans-serif;
font-weight: 100;
font-style: normal;
color: red;
}
.img01, .img02 {
position:absolute;
}
.img01 img, .img02 img {
width:200px;
height:auto;
}
.img01 {
top: 20px;
left: 20px;
}
.img02 {
top: 20px;
right: 20px;
}
Javascript
$("#object").click(function (e) {
e.stopPropagation();
});
$("#object").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#object").css("z-index", "2000");
$("#object-text").fadeIn("slow");
$("#filler").fadeIn("slow");
$("#inner").css("z-index", "2000");
});
$(document).click(function () {
$("#filler").fadeOut("slow");
$("#object-text").fadeOut("slow");
});