CSS: Hover effect over image with width: auto - html

Question

I'm trying to make a caption appear whenever I hover on the image. I want the height of the image to be set to 200px, but the width to be auto. How can I make the span with the caption also correspond to the image width? Thanks!
HTML:
<div class="projects">
<a name="folder"></a>
<h1 class="heading">Projects</h1>
<p class="classProjectsInfo">Recent class projects</p>
<div class="classProjects">
<ul class="img-list">
<li>
<img src="checkers_cover.JPG">
<span class="description2"><span>Checkers61B</span></span>
</li>
<li>
<img src="cover_ngram.JPG">
<span class="description2"><span>NGramMap</span></span>
</li>
<li>
<img src="gitlet_cover.JPG">
<span class="description2"><span>Gitlet</span></span>
</li>
</ul>
</div>
</div>
CSS:
.classProjects {
text-align: center;
margin: 0;
padding: 0;
list-style-type: none;
}
.classProjects li {
display: inline-block;
padding: 5px;
margin: 10px;
position: relative;
height: 250px;
width: auto;
}
.classProjects img {
height: 250px;
width: auto;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 250px;
position: relative;
width: auto;
}
span.description2 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 250px;
left: 0;
position: absolute;
top: 0;
width: auto;
}
span.description2 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.description2 {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 250px;
left: 0;
position: absolute;
top: 0;
width: auto;
opacity: 0;
}
ul.img-list li:hover span.description2 {
opacity: 1;
}