0

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

2 ответа 2

1

Я полагаю, что это из за того, что ссылка в ссылку обернута. а так не айс. http://joxi.ru/n2YbNQzCjPMPpA Скиньте ссылку на плагин. И потом. вы используете ссылку как блочный элемент, а она таким не является. попробуйте или поменять ссылку на div или добавить к ней стиль display:block http://joxi.ru/Vm6LJObHxlylWA потому что класс col-sm-4 говорит в бутстрапе, что надо занять 1/3 родительского блока (row в вашем случае) но действует только для блочных элементов В общем 2 варианта, или ссылка внутри ссылки - так не должно быть, или оборачивающая ссылка не блок. но скорее первое. попробуйте так http://joxi.ru/Q2KlKRxH9PNPkA

5
  • Каким образом можно это обойти? Картинка должна быть в ссылке, чтобы работал плагин просмотра картинок в всплывающем окне. И при наведении на картинки должны всплывать ссылки...
    – Slava PV
    20 фев 2018 в 23:11
  • 1
    @SlavaPV можно каждую общую ссылку воткнуть например в див. И в тот же див добавить всплывающие ссылки, но уже не внутри общей, а за ее пределами и прилепить им например position:absolute
    – stckvrw
    20 фев 2018 в 23:20
  • Ссылка на плагин: cornel.bopp-art.com/lightcase
    – Slava PV
    20 фев 2018 в 23:20
  • Значит в вашем случае надо вместо ссылки делать див как я выше написал, и инициализировать плагин как в документации, к этому диву joxi.ru/zANJRn5ClPEPpA 20 фев 2018 в 23:31
  • а картинка в стиле прописана уже. или можно еще к этому диву попробовать прописать картинку фоном. Что то я именно такой реализации как у вас не нашел в примерах плагина. 20 фев 2018 в 23:35
0

Сделал как предложил @stkvrw:

можно каждую общую ссылку воткнуть например в див. И в тот же див добавить всплывающие ссылки, но уже не внутри общей, а за ее пределами и прилепить им например position:absolute

Все заработало! Спасибо всем большое!

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.