css top and bottom not working on element - html

Question

I'm trying to position an image text overlay just above the image when it is hovered. top & bottom are not doing the trick.
Here's the code -
.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

Use the position and width settings on .img-description as shown below. And since you use opacity 0 and 1, you can erase the visibility settings (or vice versa) The text centering is of course optional, as is the white text color (which does improve the visibility, though).
.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 2

Like this?
The a tag was not taking the full height of the image tag because it was set to display:inline which does not have height and width, hence I changed it to display:inline-block so that it will have block properties too, then the element which had position:absolute was getting positioned as usual!
.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>
References:
Inline height and width

Answer 3

I agree with #Naren's answer. Just wanted to show the change when I edited the style in Devtools:
Few more changes to .image-description would give you the desired o/p:
remove top property
set bottom: 100%
set padding-bottom: 0 if you want image to be strictly aligned with top of image