divider not showing with onhover effects - html

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>