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

像这样？

a标签没有占据image标签的全部高度，因为它被设置为display:inline ，没有高度和宽度，因此我将其更改为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; } 

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

参考文献：

1. 内联高度和宽度

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设置padding-bottom: 0如果要使图像与图像顶部严格对齐