分隔线不显示悬停效果

Question

我只是在尝试一个简单的修复。出于某种原因，我的分隔线没有出现在悬停时？我怎样才能让它像其他文本一样显示出来？我还有另一个例子，说明如何让分隔线在其他页面上显示...

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

就在 header 页面的 "About"

下方

此外，我目前正在使用的是 runningfish。net/finestc 您可以在 "Recent Sales".

部分下方看到实时代码

我仍然是一个初出茅庐的编码员，所以如果我做的事情效率低下或者你注意到我可以做得更好，请指出来！我想在编码方面做得更好。欢迎批评！

谢谢！

.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>

分隔线不显示悬停效果

divider not showing with onhover effects

html

css

divider

onhover