JSFiddle - React, Tailwind, and code Playground
HTML
<a class="click" href="#" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png">Click here to fadeIn the image in a container</a>
<br/>
<a class="click" href="#" src="https://www.google.com/images/srpr/logo4w.png">Another one</a>
<div id="hiddenPanel" class="hidden">
<img src="" /><br/>
<button id="closeButton">close me</button>
</div>
CSS
.hidden {
display: none;
opactiy: 0;
}
JavaScript
$(function () {
$("a.click").click(function (event) {
$("#hiddenPanel").fadeOut(0);
event.preventDefault();
$("#hiddenPanel img").attr("src", $(this).attr("src"));
$("#hiddenPanel").fadeIn(1000);
});
$("#closeButton").click(function () {
$("#hiddenPanel").fadeOut(1000);
});
});