JSFiddle - React, Tailwind, and code Playground

HTML

<div id="album">
    <div class="pic"></div>
    <div class="screen">
         <h1 class="title">Photo 1</h1>

        <img src="images/1 png.png" class="image" />
        <p class="description">This is a description</p>
    </div>
    <div class="screen">
         <h1 class="title">Photo 1</h1>

        <img src="images/1 png.png" class="image" />
        <p class="description">This is a description</p>
    </div> <span class="clear_left"></span>

</div>

CSS

.screen {
    border: 1px solid green;
    margin: 10px auto;
    float: left;
    cursor:pointer
}
.image {
    width: 300px;
}
.title {
    font-size: 30px;
}
.description {
    font-size: 25px;
}
.pic {
    width: 600px;
    position:fixed;
}

JavaScript

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display($(this));
    });
});

function display($this) {
    var source = $("img", $this).attr("src");
    alert("The souce of the image is " + source);
}