Show/Hide elements based on parent DIV height
<p>I'm trying to show and hide some metadata elements inside and overlay DIV based on the DIV's height. <a href="http://i.imgur.com/IA2wP.png" rel="nofollow">Here is an image of what it should look like</a>, with two DIVs and their overlays showing.</p>

<p>The one on the left has all its metadata visible, and the one on the right has its most basic metadata showing. What I've been trying to achieve is the amount of metadata showing shrinks as the height of the DIV shrinks. I used <a href="http://stackoverflow.com/questions/4296012/hide-div-if-screen-is-smaller-than-1024">code on this page</a> as a starting point, but haven't been able to solve this yet. Here's what I've come up with so far:</p>

<pre><code>$(document).ready(function () {
    $('.overlay').each(function () {
        // 74 being the DIV height of the smaller DIV in the image
        if ($(this).closest('.brick').children('img').height() &lt;= 74) {
            $('.categories').hide();
        }
        else {
            $('.categories').show();
        }
    });

}); 
</code></pre>

<p>This hides the categories metadata, but does so on ALL instances of .categories class, not just the ones inside DIVs with a height shorter than 75 pixels.</p>

<p>Here is a snippet of my HTML markup:</p>

<pre><code>&lt;div class="brick"&gt;
    &lt;img src="img/caine.jpg" /&gt;
    &lt;div class="overlay"&gt;
        &lt;div class="categories"&gt;
            &lt;span&gt;Typography&lt;/span&gt;
            &lt;span&gt;Print&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt; &lt;!-- .overlay --&gt;
    &lt;span class="shadow"&gt;   
&lt;/div&gt; &lt;!-- .brick --&gt;
</code></pre>
