title: overlay letter on a slider item
body: <p>I trying to overlay a letter on <em>slick slider</em> item.. wan't to achieve something like <a href="https://www.epicurrence.com/" rel="nofollow">this</a>.
  But it"s not working. What am I doing wrong? here is my <a href="https://jsfiddle.net/elene/xqeg8roy/2/" rel="nofollow">fiddle</a></p>
  
  <pre><code> &lt;div class="slider single-item"&gt;
  
      &lt;div id="item"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
  
            &lt;div class="col-lg-6 col-md-6" id="member_image"&gt;
              &lt;img class="img-responsive shadow" src="https://www.epicurrence.com/images/speakers/mackey.jpg" /&gt;
  
            &lt;/div&gt;
            &lt;div class="col-lg-6 col-md-6 text-center"&gt;
              &lt;hr id="devider" /&gt;
              &lt;div id="member_name"&gt;Bradley Michael&lt;/div&gt;
              &lt;div id="position"&gt;Graphic Designer &lt;/div&gt;
              &lt;hr style="width: 15px; margin: auto; margin-top: 30px; margin-bottom: 30px;" /&gt;
              &lt;div id="member_text"&gt;
                Urabitur eget odio ac risus malesuada gravida ac non dolor. In dignissim purus augue. Duis mauris justo, interdum id dolor eget, consequat consectetur ante. Quisque tempus nunc rutrum ipsum venenatis, quis mollis risus ultrices. Maecenas vitae odio eget
                nulla volutpat semper ac in lacus.
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="overlay_member"&gt;B&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>