divider not showing with onhover effects

Question

I am just attempting a simple fix. For some reason my divider isn't showing up on hover? How can I get it to show up like the other text does? I have another example of how i got the divider to look on other pages...

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

Right underneath the header of the page that says "About"

Also, what I am currently working with is runningfish.net/finestc You can see the live code there right underneath the section that says "Recent Sales".

I am still a fledgling coder so if I am doing something inefficiently or could be doing better that you notice, please point it out! I want to get better at coding. Critique welcome!

Thanks!

.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

Add a width value to <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>