html - css 顶部和底部不适用于元素

Question

当图像悬停时，我试图将图像文本叠加层放置在图像上方。 top 和 bottom 没有用。

这是代码-

.projects {
  padding-top: 50px;
}

.desktop-image {
  position: relative;
}

.desktop-image:hover img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  cursor: e-resize;
}

.desktop-image > img {
  width: 700px;
}

.img_description {
  position: absolute;
  top: -13%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
  font-family: inherit;
}

.desktop-image > a:hover .img_description {
  visibility: visible;
  opacity: 1;
}

 <div class="projects">
  <div class="desktop-image">
    <a class="desktop-image" href="https://www.stellamccartney.com/gb" target="_blank">
      <img src="https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000342472436.jpg?strip=all&w=960&quality=100">
      <p class="img_description">
        An event directory that I<br> founded. Development, design &<br> content by me.
      </p>
    </a>
  </div>
</div>

Answer 1

使用 .img-description 上的位置和宽度设置，如下所示。并且由于您使用不透明度 0 和 1，您可以清除可见性设置(反之亦然)文本居中当然是可选的，白色文本颜色也是如此(虽然确实提高了可见性) .

.projects {
  padding-top: 50px;
}

.desktop-image {
  position: relative;
}

.desktop-image:hover img {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  cursor: e-resize;
}

.desktop-image > img {
  width: 700px;
}

.img_description {
  position: absolute;
  bottom: 13%;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity .7s, visibility .7s;
  font-family: inherit;
}

.desktop-image > a:hover .img_description {
  opacity: 1;
}

<div class="projects">
  <div class="desktop-image">
    <a class="desktop-image" href="https://www.stellamccartney.com/gb" target="_blank">
      <img src="https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000342472436.jpg?strip=all&w=960&quality=100">
      <p class="img_description">
        An event directory that I<br> founded. Development, design &<br> content by me.
      </p>
    </a>
  </div>
</div>