Hover over image making it transparent and showing text - html

Question

Hey I'm working on a portfolio page (just using HTML and CSS) and I created a grid of images. My plan is that the one image that is hovered over gets transparent (0.2 transparency or so) and a description text appears at this field.
I created following code, but this makes my description text transparent as well.
How can I get the text to stay fully visible?
HTML:
<div id="imagelist">
<a href="">
<img src="img/img1.jpg" width="200px" height="200px" alt="Image 1" />
<p class="imgtext">This is the description text.
</p>
</a>
</div>
Can you help me with the CSS part?

Answer 1

I just worked on it
Made some changes try it out
<style>
#imagelist a {position: relative;display: inline-block;}
#imagelist a p{display: none;}
#imagelist a:hover p{position: absolute;width: 100%;height: 100%;background: #000;opacity: 0.8;top: 0;left: 0;margin: 0;display: block;}
#imagelist a p span{display: inline-table;width: 100%;height: 100%;text-align: center;color:#fff;}
#imagelist a p span span{display: table-cell;vertical-align: middle;}
</style>
<div id="imagelist">
<a href="">
<img src="img/img1.jpg" width="200px" height="200px" alt="Image 1" />
<p class="imgtext">
<span>
<span>This is the description text.</span>
</span>
</p>
</a>
</div>
It looks quite simple just added some few extra tags with it. Try it out and let me know the feedback

Answer 2

When the div is in a hover state target the Image element to change opacity and change the display property for the description.
#imagelist:hover img {
opacity: .2;
}
#imagelist:hover .imgtext {
display: block;
}
.imgtext {display: none;}
<div id="imagelist">
<a href="">
<img src="img/img1.jpg"
width="200px"
height="200px"
alt="Image 1"/>
<p class="imgtext">This is the description text.
</p>
</a>
</div>

Answer 3

Do you mean the text should appear behind the transparent picture? Also, are all thumbnails 200px by 200px?
If yes, you could do it like this:
#imagelist a {
width: 200px;
height: 200px;
position: relative;
display: block;
}
#imagelist img {
position: absolute;
left: 0;
top: 0;
bottom: 100%;
height: 100%;
z-index: 1;
}
#imagelist img:hover {
opacity: 0.2;
}
<div id="imagelist">
<a href="">
<img src="http://s0.geograph.org.uk/geophotos/03/97/06/3970600_94c29e78.jpg" />
<p class="imgtext">This is the description text.
</p>
</a>
</div>