title: How to overlay zoom icons over images and always keep them lined up perfectly?
body: <p>This is driving me crazy because I <em>know</em> there's a way to do it, I just don't know how. Here's what I've come up with as a replication of the problem I'm having:</p>
  
  <p><a href="http://jsbin.com/yikuda" rel="nofollow">http://jsbin.com/yikuda</a></p>
  
  <p>Play with the window width and see what happens. How can I get the plus icons to stay in the right spot, even when the images stack one per row as opposed to three per row?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12 col-md-4"&gt;
        &lt;div class="product text-center"&gt;
          &lt;img src="http://placehold.it/300x300"&gt;
          &lt;span class="glyphicon glyphicon-plus-sign zoom-btn"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-4"&gt;
        &lt;div class="product text-center"&gt;
          &lt;img src="http://placehold.it/300x300"&gt;
          &lt;span class="glyphicon glyphicon-plus-sign zoom-btn"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-4"&gt;
        &lt;div class="product text-center"&gt;
          &lt;img src="http://placehold.it/300x300"&gt;
          &lt;span class="glyphicon glyphicon-plus-sign zoom-btn"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.zoom-btn {
    font-size: 2rem;
    position: absolute;
    top: 5px;
    right: 45px;
  }
  </code></pre>