Разделитель не отображается с эффектами наведения

Question

Я просто пытаюсь исправить это. По какой причине мой разделитель не отображается при наведении курсора? Как я могу заставить его появляться так же, как в другом тексте? У меня есть еще один пример того, как я получил разделитель, чтобы посмотреть на других страницах...

http://runningfish.net/finestc/about/

Прямо под заголовком страницы с надписью "О программе"

Кроме того, сейчас я работаю с runningfish.net/finestc. Вы можете увидеть живой код прямо под разделом "Недавние продажи".

Я все еще начинающий программист, поэтому, если я делаю что-то неэффективно или могу делать лучше, что вы заметили, пожалуйста, укажите это! Я хочу стать лучше в кодировании. Критика приветствуется!

Спасибо!

.grids {
  width: 33.33%;
  float: left;
  display: inline-block;
  position: relative;
}

.grids img {
  display: block;
  height: 33.33vh;
  width: 100%;
}

.grid-image-description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .5s, visibility .5s;
}

.grid-image-description h2 {
  font-family: playfairdisplay;
  font-size: 1.7em;
  color: #fff;
}

.grid-image-description p {
  font-family: playfairdisplay;
  font-size: 1.0em;
  color: #fff;
}

.grid-image-description hr {
  border-top: 1px;
  border-color: #001532;
  border-style: solid;
  box-shadow: 2px 1px 15px #fff;
  margin: 0 0 0 10px;
  max-width: 200px;
}

.grids:hover .grid-image-description {
  visibility: visible;
  opacity: 1;
}

.grids-description {
  transition: .5s;
  transform: translateY(1em);
}

.grids:hover .grid-image-description {
  transform: translateY(0);
}

<a href="#nogo">
  <div class="grids">
    <img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
    <div class="grid-image-description">
      <h2 class="grids-header">House For Sale</h2>
      <hr>
      <p class="grids-description">123 mulbury street</br>san diego, ca 92101
      </p>
    </div>
  </div>
</a>

Answer 1

Добавить width значение для <hr>

.grids {
  width: 33.33%;
  float: left;
  display: inline-block;
  position: relative;
}

.grids img {
  display: block;
  height: 33.33vh;
  width: 100%;
}

.grid-image-description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .5s, visibility .5s;
}

.grid-image-description h2 {
  font-family: playfairdisplay;
  font-size: 1.7em;
  color: #fff;
}

.grid-image-description p {
  font-family: playfairdisplay;
  font-size: 1.0em;
  color: #fff;
}

.grid-image-description hr {
  border-top: 1px;
  border-color: #001532;
  border-style: solid;
  box-shadow: 2px 1px 15px #fff;
  margin: 0 0 0 10px;
  max-width: 200px;
  /* added */
  width: 200px;
}

.grids:hover .grid-image-description {
  visibility: visible;
  opacity: 1;
}

.grids-description {
  transition: .5s;
  transform: translateY(1em);
}

.grids:hover .grid-image-description {
  transform: translateY(0);
}

<a href="#nogo">
  <div class="grids">
    <img class="grid-image-cover" alt="" src="//runningfish.net/finestc/wp-content/uploads/2018/02/Depositphotos_11636543_original.jpg" />
    <div class="grid-image-description">
      <h2 class="grids-header">House For Sale</h2>
      <hr>
      <p class="grids-description">123 mulbury street<br>san diego, ca 92101
      </p>
    </div>
  </div>
</a>