title: Check if objects overlap (in dynamic environment) - jQuery
body: <p>First off all, please <strong><a href="http://demo.crozer.me/era-wp" rel="nofollow">view the demonstration</a></strong>. Scroll down until you see the image-blocks, and hover over them. You will notice that some have a description which overlap the Date/category line. My goal is to check for precisely that.</p>
  
  <p>I figured out that you can easily check if one object is overlapping another, by comparing their offset values. In my case, for example, the first object sits above the second one; thus, I only needed to compare their top offset like so:</p>
  
  <pre><code>var onePos = $(one).offset().top+$(one).outerHeight(true),
      twoPos = $(two).offset().top;
  
  if(onePos &gt;= twoPos) {
      // object ONE is overlapping object TWO!
  }
  </code></pre>
  
  <p>However, I am now using the <a href="http://isotope.metafizzy.co/demos/layout-modes.html" rel="nofollow">isotope plugin</a>, which generates a masonry-like grid, where objects' offsets do not necessarily equal to where they end up being positioned.</p>
  
  <p>So here I am struggling to find a stable method for checking if two objects overlap each other (specifically, if object ONE overlaps object TWO).</p>
  
  <p>I hope I explained myself clearly. If I missed something please let me know!<br />
  Thank you a million,</p>