Нужно по верх картинки добавить еще несколько ссылок, как . Заголовок добавляется нормально, но как /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. Картинки обернуты в ссылки для работы плагина просмотра картинок.