使用标记悬停调整图片大小

Question

@charset "utf-8";
/* CSS Document */
body
{
	margin:0 auto;
}
.fixed
{
	max-height: 500px;
	max-width: 700px;
}
a:after 
{
	clear: both 
}

a img
{
	height: auto;
	float: left;
	padding: 20px;
	max-height: auto;
	max-width: 100%;
}
a.hovMe
{
	line-height:30px;
	outline: none;
	transition: .125s linear;
}
a.hovMe:hover 
{
	text-decoration:none;
} 
a.hovMe span, a.hovMel span
{
	display:none;
	line-height:16px;
	margin-left:26px;
	margin-top:-30px;
	padding:14px 20px;
	width:500px; 
	z-index:10;
}
a.hovMe:hover span
{ 
	background: white;	
	border:1px solid #000000;
	color:#111;
	display: inline-block;
	position: absolute;
}

<a class="hovMe">
			<div style="fixed">
				<img src="http://ito.auburncc.org/localuser/YR16/tmccandless/css/G_pg/img/p1.png" alt="">
				<span>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat ut lacus in feugiat. Nulla at malesuada nibh. Proin condimentum, augue ac condimentum volutpat, metus justo elementum massa, volutpat tincidunt mi nunc sed libero. Aenean lacinia vehicula ligula, non suscipit diam elementum id. Donec ac leo sem. Donec ac urna nec metus semper tristique. Nunc ac cursus odio, nec bibendum arcu. Vivamus mauris orci, cursus sagittis pulvinar id, congue a quam. Donec laoreet lobortis condimentum. Fusce a diam sit amet ante pharetra rhoncus vehicula vel augue. Donec arcu tortor, iaculis eleifend augue id, molestie blandit ipsum.
				</span>
			</div>
		</a>

好的，我正在尝试在:hover标记内的img标记上显示一些带有a的简单文字。我现在有它所以它显示文本，但它没有调整图片的大小，我尝试了:after伪选择器，但无济于事。

我想要发生的是here所显示的内容。单击此按钮时，此人的显示方式将显示文本，然后调整图像大小以适合block element。除了他/她以外，当你按下按钮时，他们首先显示图片和文字然后显示顶部的图片，我想要发生的是当你将鼠标悬停在它上面或只是点击它时，只有一张图片可以开始，它会transition进入整个宽度顶部的图片，然后显示在其下方的文字。

此外，我希望它不移动另一张图片，基本上让它们始终向左浮动并且每个div都是自包含的。如果有人可以帮我打开建议。

谢谢！