Как форматировать текст с наложением наложения hover

Jhine7 спросил: 13 июня 2018 в 11:49 в: html

У меня есть следующий код с целью отображения имени без зависания с центром в форме, а затем после того, как вы набрали био 5 строк, все с минимальным промежуток между разрывами строк.

В моем коде в настоящее время проблема форматирования передней стороны, чтобы она была центрирована и имела тот же большой шрифт, что и после наведения, и еще более заметно неправильно - информация о назад сходит конец формы. Не сосредоточено.

<html><div id="box">
  John Doe  <div id="overlay">
    <span id="plus">Title:<br>DOB:<br>Hometown:<br>Info4:<br>Info5:</span>
  </div></div><style>body {
  background: -1;
}#box {
  width: 300px;
  height: 200px;
  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  margin: 5% auto 0 auto;
  background-size: cover;
  border-radius: 5px;
  overflow: hidden;  /* NEW */
  line-height: 200px;
  text-align: center;
  position: relative;
}#overlay {
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  padding: 45px 0 66px 0;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  -moz-transition: opacity 0.25s ease;  /* NEW */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}#box:hover #overlay {
  opacity: 1;
}#plus {
  font-family: Helvetica;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  font-size: 24px;
}</style>
</html>

1 ответ

Есть решение
Kari ответил: 13 июня 2018 в 12:35

Это не ответ на все ваши вопросы, но чтобы шрифты были одинаковыми, добавьте стиль шрифта, который у вас есть для #plus вместо селектора #box. Вам нужно будет изменить цвет для селектора коробки на черный, а для #plus вы можете оставить то, что у вас есть в настоящее время для цвета.