title: responsive div overlay with twitter bootstrap
body: <p>I'm using twitter bootstrap with wordpress and want to display boxes with a featured image and some text, it looks like that:</p>
  
  <pre><code>      &lt;div class="span2 first-page-article"&gt;
          &lt;?php while (have_posts()) :the_post(); ?&gt;
              &lt;?php if (has_tag('start-smaka')) : ?&gt;
                  &lt;?php 
                      if (has_post_thumbnail()) 
                      {
                  ?&gt;
                      &lt;div&gt;
                        &lt;?php the_post_thumbnail(); ?&gt;
                      &lt;/div&gt;
                  &lt;?php
                      } 
                  ?&gt;
                  &lt;div class="first-page-article-description"&gt;
                      &lt;h2&gt;&lt;?php echo get_the_title(); ?&gt;&lt;/h2&gt; 
                      &lt;div&gt;&lt;?php the_content(); ?&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;?php endif ?&gt;
          &lt;?php endwhile ?&gt;
        &lt;/div&gt;&lt;!--/span--&gt;
  </code></pre>
  
  <p>I did my own grid (10cols, 80width with 16 gutter) and uploading featured image 220px*220px and than I have 220px min-height on first-page-article-description; that way I get a box that is 220px width and 440px height (it was important that the text box has the same size as the image). Now I want to make en overlay effect on div hover. I was trying to use that plugin: <a href="http://www.backslash.gr/demos/contenthover-jquery-plugin/" rel="nofollow">http://www.backslash.gr/demos/contenthover-jquery-plugin/</a> (example 4) but its breaking the site; it's no longer responsive. Does anyone know how to sole it?</p>