Info Box Similar To Google Image Search Results

Here are some factors I would like to borrow from Googles Image Search Results: Each item sits next to each other and falls to the next row if it cant fit in the current row becau

Solution 1:

If you want to avoid javascript as much as possible, you can create a <div class='info'> with the details about the image after each <div class="item"> like so:

<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the first image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the second image.
</div>
<div class="item">
    <img src="some_relative_image.png"/>
</div>
<div class="info">
    Details about the third image.
</div>

---

After that, replace this line in your css:

div.info
{
    display: normal;
}

with:

div.info
{
    display: none;
}

This will make the details hidden when the page is loaded.

---

And finally, insert the following jQuery code to make the details appear when <div class="item"> is clicked:

$("div.item").click(function (){
    $("div.info").css("display", "none");
    $(this).find("+ div.info").css("display", "block"); 
});

---

jsFiddle here