title: How to position half of image out of the div responsive
body: <p>I would like to position the icons where the red square is. But I have tried the position: relative and position absolute but I dont understand why its not working.</p>
  
  <p><a href="https://i.stack.imgur.com/QoiNz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QoiNz.png" alt="enter image description here"></a></p>
  
  <pre><code>   &lt;div class="col-xs-12 col-sm-4"&gt;
              &lt;div class="wrap"&gt;
                  &lt;img class="blockico" src="&lt;?php bloginfo('template_url'); ?&gt;/img/icons/catering150.png"&gt;
                  &lt;h4&gt;Catering&lt;/h4&gt;
                  &lt;a href="url"&gt;The Menu&lt;/a&gt;
                  &lt;br&gt;
                  &lt;a href="url"&gt;Today's Menu&lt;/a&gt;
                  &lt;br&gt;
                  &lt;a href="url"&gt;Gallery&lt;/a&gt;
                  &lt;br&gt;
                  &lt;a href="url"&gt;Festivities&lt;/a&gt;
                  &lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      .wrap {
  position:relative;
  width: 100%;
  height: 100%;
  background-color: #e9e9e9;}
  
      .blockico {
  position:absolute;
  top:-50%;}
  </code></pre>