Заголовок миниатюры при наведении по центру с отступом / полем?

Я хочу создать белую надпись при наведении, центрированную по вертикали и горизонтали. Вокруг этого я хотел бы добавить такое же отступ/поле и внутри некоторого отступа/поля с заголовком/заголовком по центру, по горизонтали и вертикали.

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

В примере изображения я добавил несколько красных меток, что я имею в виду.

Пример:

Пример наведения миниатюры

---> FIDDLE

    <div class="col-4">
    <a class="thumb" href="#">
        <img src="http://fakeimg.pl/500x330/ccc/">
        <div class="caption"><span>Project title centered vertical and horizontal</span></div>
    </a>
    </div>

html css caption thumbnails
person KP83    schedule 17.02.2015    source источник
comment
Возможно, вопрос Как центрировать элемент по горизонтали и вертикали? может помочь.   -  person Josh Crozier    schedule 17.02.2015
comment
спасибо, Джош, похоже, что для первого варианта не нужно так много кода. Поддержка браузера для преобразования: translateX(-50%) translateY(-50%); достаточно хорошо?   -  person KP83    schedule 17.02.2015

Ответы (3)


arrow_upward
1
arrow_downward

Одним из вариантов может быть использование inline-block на элементе span для вертикального algin, а для пробела используйте padding и box-sizing в заголовке. Проверь это:

.caption {
  position: absolute;
  width: 80%; 
  height: 80%;
  top: 10%; 
  left: 10%;
  background-color: white;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  box-sizing:border-box;
  padding:5px;
}
.caption span {
  display: inline-block;
  opacity: 0;
  vertical-align:middle;
  color: #111;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: white;
}
.caption:before {
    content:" ";
    height:100%;
    width:0;
    display:inline-block;
    vertical-align:middle;
}

DemoFiddle

person DaniP    schedule 17.02.2015
comment
спасибо за помощь, но как насчет отступов/полей вокруг белого квадрата сверху/снизу/слева/справа того же размера и отступов внутри белого квадрата, чтобы заголовок не доходил до конца? - person KP83; 17.02.2015
comment
@Foroloca использует отступы и размер окна для родителя: jsfiddle.net/bh14xdwr/7 - person DaniP; 17.02.2015
comment
Хорошо, вы знаете, что вокруг белого квадрата одинаковый размер, теперь отступы / поля сверху и снизу меньше, чем справа и слева. - person KP83; 17.02.2015
comment
@Foroloca будет сложно, так как пространство слева и сверху зависит от высоты и ширины, и эти значения просто разные .... но если пропорция изображения всегда такая, вы можете изменить значения, чтобы они соответствовали этому: jsfiddle.net/bh14xdwr/8 - person DaniP; 17.02.2015
comment
пропорции изображения всегда одинаковы, странно, что такая простая вещь должна быть такой сложной для кодирования. Таким образом, отступы/маржа вокруг не могут иметь такое же значение, как 20 пикселей или 5% и т. д., вместо расчетного трюка 72% и т. д.? - person KP83; 17.02.2015
comment
@Foroloca с помощью calc может упростить создание пространства вокруг с помощью px jsfiddle.net/bh14xdwr/9 - person DaniP; 17.02.2015

arrow_upward
0
arrow_downward

Проверьте эту скрипту.

Отобразите родителя как ячейку таблицы и используйте вертикальное выравнивание, чтобы центрировать все

.block {
   background-color: #eee;
   min-height: 200px;
   display: table-cell;
   vertical-align: center;
   text-align: center;
}
.block-contents {
   background-color: #fff;
   padding: 20px;
   margin: 20px;
}
person Jackson    schedule 17.02.2015
comment
спасибо, но можете ли вы увидеть, как это работает в структуре того, что у меня есть, потому что это не работает, если я использую это так. - person KP83; 17.02.2015

arrow_upward
0
arrow_downward

Вы также всегда можете позиционировать диапазон абсолютно.

.caption span {
    display: block;
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform: translate(-50%, -50%);
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: white;

}

демонстрация JSfiddle

person Paulie_D    schedule 17.02.2015