Как сделать ссылку по верх картинки?

Нужно по верх картинки добавить еще несколько ссылок, как . Заголовок добавляется нормально, но как /a>только добавляю ссылку - картинка увеличивается в размерах. Не могу понять в чем причина. Хелп!

HTML

<div class="row">
  <a class="col-sm-4" href="https://s.cdpn.io/44303/tumblr_mp6scv2xrZ1st5lhmo1_1280.jpg">
    <div class="gallery-section__square-picture">
      <div class="gallery-section__img-hover">
        <h4>Some title</h4>
        <p class="gallery-section__icon-links">
          <a href="#">link 1</a>
          <a href="#">link 2</a>
          <a href="#">link 3</a>
        </p>
      </div>
    </div>
  </a>
  <a class="col-sm-4" href="https://s.cdpn.io/44303/tumblr_mp6scv2xrZ1st5lhmo1_1280.jpg">
    <div class="gallery-section__square-picture">
      <div class="gallery-section__img-hover">
        <h4>Some title</h4>
        <p class="gallery-section__icon-links">
          <a href="#">link 1</a>
          <a href="#">link 2</a>
          <a href="#">link 3</a>
        </p> 
      </div>
    </div>
  </a>
  <a class="col-sm-4" href="https://s.cdpn.io/44303/tumblr_mp6scv2xrZ1st5lhmo1_1280.jpg">
    <div class="gallery-section__square-picture">
      <div class="gallery-section__img-hover">
        <h4>Some title</h4>
         <p class="gallery-section__icon-links">
          <a href="#">link 1</a>
          <a href="#">link 2</a>
          <a href="#">link 3</a>
        </p>
      </div>
    </div>
  </a>
</div>

CSS

.col-sm-4 {
  magrin: 0;
  padding: 0;
}
.gallery-section__square-picture {
  background-image: url(https://s.cdpn.io/44303/tumblr_mp6scv2xrZ1st5lhmo1_1280.jpg);
  width: 100%;
  padding-bottom: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
}
.gallery-section__img-hover {
  position: absolute;
}

Код

P.S. Картинки обернуты в ссылки для работы плагина просмотра картинок.