css - 画像の上にカーソルを置いたときにラベルに画像名を表示する方法

Question

ホバーすると10倍にズームする8つの画像があります。今、ホバーした画像の名前 (つまり、最初の画像の alt="a") をページ上部の別のラベルに表示したいと考えています。cssを使用してそれを行う方法??

<div class="positioner11">
<a class="slide" aria-haspopup="true"><img class="a1" src="Insta/1.jpg" alt="a" /></a>
<a class="slide" aria-haspopup="true"><img class="a2" src="Insta/2.jpg" alt="b" /></a>
<a class="slide" aria-haspopup="true"><img class="a3" src="Insta/3.jpg" alt="c" /></a>
<a class="slide" aria-haspopup="true"><img class="a4" src="Insta/4.jpg" alt="d" /></a>
<a class="slide" aria-haspopup="true"><img class="a1" src="Insta/5.jpg" alt="e" /></a>
<a class="slide" aria-haspopup="true"><img class="a2" src="Insta/6.jpg" alt="f" /></a>
<a class="slide" aria-haspopup="true"><img class="a3" src="Insta/7.jpg" alt="g" /></a>

<a class="slide last" aria-haspopup="true"><img class="a5" src="Insta/8.jpg" alt="h" />       </a>

</div>

.positioner11 {position:absolute; left:0; top:576px;}

.slide {display:block; border:0; text-decoration:none; float:left; border-right:1px     solid #fff;}
.last {border:0;}
.slide img {display:block; border:0; width:50px; height:50px; cursor:pointer;
-webkit-transition-duration: .7s;
-moz-transition-duration: .7s; 
-o-transition-duration: .7s;
transition-duration: .7s;
}
.slide:hover img 
{
width:500px;
height:500px;

}