CSS：悬停在图像上的效果，宽度为：auto

Question

每当我将鼠标悬停在图像上时，我都会尝试显示标题。我希望图像的高度设置为200px，但宽度为auto。如何使标题的跨度也与图像宽度相对应？谢谢！

HTML：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CSS：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;