css顶部和底部不工作元素

Question

我试图在图像悬停时将图像文本叠加在图像上方。 @model IEnumerable<Project.Models.ResultsClass> @foreach (var item in Model) { // .. display properties } ＆amp; top没有做到这一点。

这是代码 -

＆＃13;

＆＃13;

bottom

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

喜欢这个吗？

a标记没有占据image标记的全部高度，因为它设置为display:inline，它没有高度和宽度，因此我将其更改为{{1所以它也会有块属性，那么display:inline-block的元素就像往常一样定位！

position:absolute

.projects {
  padding-top: 50px;
}

.desktop-image {
  position: relative;
  display: inline-block;
}

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

<强>参考文献：

1. Inline height and width

Answer 2

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

Answer 3

我同意@Naren的回答。我想在Devtools中编辑样式时显示更改：

.image-description的更多更改会为您提供所需的o / p：

• 删除top属性
• 设置bottom: 100%
• 如果您希望图片与图片顶部严格对齐，请设置padding-bottom: 0