Надпись при наведении на изображение приводит к большому белому зазору под изображением

Я создаю сайт с WordPress. На моей домашней странице я хочу сетку изображений (10 x 3) разных продуктов, и при наведении курсора на каждое изображение будет появляться заголовок с названием продукта.

Мне удалось сделать 3/4 этого, но под каждой строкой есть огромное пустое пространство. :(

Я использую виджет редактора SiteOrigin для вставки изображения и использую HTML и CSS для кодирования эффектов наведения. См. ниже текущую кодировку.

HTML:

<div id="pic">

<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>

</div>

CSS:

.text { 
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-align: center; 
  background: rgba(255, 255, 255, 0.5);
 }

#pic .text {
  position:relative;
  bottom:80px;
  left:0px;
  visibility:hidden;
}

#pic:hover .text {
  visibility:visible;
}

Вот сайт, чтобы вы могли увидеть, что я сделал: http://peacefruit.net

В верхнем ряду есть подписи, но также и надоедливый пробел. Нижние три строки являются примерами того, как я хочу, чтобы это выглядело (без границ или промежутков между изображениями). Все строки и отдельные виджеты не имеют отступов, полей или желобов, и я уже настроил отступ темы на 0 с помощью CSS.

Я уверен, что мне не хватает простой строки кода, но это сводит меня с ума! Пожалуйста, пришлите помощь.


image css hover caption removing-whitespace
person pepper222    schedule 23.11.2016    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Попробуйте добавить в свой встроенный CSS для siteorigin-panels-stretch overflow:hidden; height:164.89px;

Надеюсь, это сработает.

Спасибо!

person realtymarker    schedule 23.11.2016

arrow_upward
1
arrow_downward

В вашем случае
идентификатор должен быть уникальным.
Так что лучше заменить #pic на класс
Кроме того, тег <p> в вашем стиле содержит padding-bottom, и он будет учитывать проблема с пробелами.

Измените каждую картинку на следующий HTML:

<div class="pic">
    <img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
    <div class="text">Summer Mikan</div>
</div>

CSS:

.pic{
    position: relative;
}

.pic .text{
    position: absolute;
    top: 80px;
    width: 100%;
    visibility: hidden;
}

тогда должно работать.

person Tim Cosmo    schedule 23.11.2016

arrow_upward
1
arrow_downward

Таблицы стилей для тем WordPress могут иметь много CSS-раздувания, поэтому вы на правильном пути, создав пользовательскую таблицу стилей, чтобы учесть желаемые нюансы стиля.

Поскольку это адаптивная тема, лучше начать решать ее с точки зрения мобильных устройств.

Первое, что нужно обрезать, это bottom-margin: 30px; вместо .panel-grid-cell, вот так:

.home #main .panel-grid-cell {
    margin-bottom: 0;
}

Следующее, что нужно сделать, это исправить разметку HTML. Значение pic присваивается нескольким атрибутам id. Атрибут id используется для обозначения уникального элемент. Атрибут class обозначает неуникальный элемент. Вместо этого pic следует назначать атрибутам class, так как многие элементы в вашем макете используют это значение ловушки. Как это:

<div class="pic">

Я заметил, что img.hover и p.text завернуты в ненужный тег <p>. Убедитесь, что этого не происходит в редакторе SiteOrigin.

Затем вы должны обрезать bottom-margin: 1.5em для абзацев внутри .pic div (обратите внимание на обозначение pic как class хука .pic, а не id хука, который был бы #pic):

.pic p {
    margin-bottom: 0;
}

Чтобы стать еще ближе, следует использовать относительное позиционирование в div .pic, чтобы гарантировать, что последующее предложение по стилю (position: absolute;) вступит в силу:

.pic {
  position: relative;
}

А затем для текста, который появляется при наведении на изображение:

p.text {
  position: absolute;
  width: 100%;
}

Приведенные выше стили будут работать для мобильных устройств, но ваша тема является адаптивной, и вам может потребоваться учитывать некоторые вариации стилей для разных размеров экрана.

Для планшетов вам понадобится такой медиа-запрос:

@media (min-width: 600px) { 
  .some-class {
    some-property: some-value;
  }
  etc...
}

И, наконец, для рабочего стола:

@media (min-width: 1000px) { 
  .some-class {
    some-property: some-value;
  }
  etc....
}
person jacefarm    schedule 23.11.2016

arrow_upward
0
arrow_downward

Спасибо всем за вашу помощь :) После некоторого возни с предложениями и обновлением программного обеспечения теперь нет пробела!

Я подумал, что опубликую свой окончательный код на случай, если у кого-то возникнет аналогичная проблема, и это может помочь. (Примечание: есть небольшие изменения стиля, которые отличаются от оригинального поста, но не влияют на то, как он работает).

HTML:

<div class="pic">
    <img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
    <div class="text">Summer Mikan</div>
</div>

КЛАСС ВИДЖЕТА:

fade

CSS:

.fade {
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}

.fade:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

.pic {
  position: relative;
}

.text { 
  color: #FFFFFF;
  font-size: 22px;
  font-weight: bold;
  text-align: center; 
  background: rgba(214, 187, 14, 0.85);
 }

.pic .text {
  position:absolute;
  top: 0px;
  width: 100%;
  visibility:hidden;
}

.pic:hover .text {
  visibility:visible;
}

.pic p {
  margin-bottom: 0px;
}

Очень рад, что наконец-то все заработало! Большое спасибо всем!

person pepper222    schedule 12.12.2016