title: How to make an overlay element responsive?
body: <p>I have a video gallery of thumbnails in bootstrap 3. Each thumbnail has a text overlay that appears on mouse hover. This all works fine but I am now trying to add a play icon to the overlays. The problem is that whilst the original text thumbnails are responsive the play icon is not. What have I got wrong?</p>
  
  <p>Here is a <a href="https://jsfiddle.net/jsykes/eysa85a4/6/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'&gt;
  
        &lt;div class="thumbnail"&gt;
          &lt;a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI"&gt;
  
            &lt;div class="caption"&gt;
              &lt;h4 class=""&gt;Richard Feynman&lt;/h4&gt;
              &lt;p class=""&gt; Watch Him&lt;/p&gt;
            &lt;/div&gt;
            &lt;!-- /.caption--&gt;
            &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive"&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- /.thumb--&gt;
      &lt;/div&gt;
      &lt;!-- /.col --&gt;
    &lt;/div&gt;
    &lt;!--end row--&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.thumbnail {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
  }
  
  .caption {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    padding: 2%;
    display: none;
    text-align: left;
    color: #fff !important;
    z-index: 2;
    /*This is the play icon I ant to be responsive */
    background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$("[rel='tooltip']").tooltip();
  $(document).ready(function() {
    $('.thumbnail').hover(
      function() {
        $(this).find('.caption').slideDown(250); //.fadeIn(250)
      },
      function() {
        $(this).find('.caption').slideUp(250); //.fadeOut(205)
      }
    );
  
  });
  </code></pre>