html - Hovered span displaying under image -

So I have a list of 'things' that people can get information about each one displayed in this way Are there.

& lt; - div 1 a.img - & gt; & Lt; - div 2 a.img - & gt; & Lt; - div 3 a.img - & gt;

& lt; - div 4 a.img - & gt; & Lt; - div 5 a.img - & gt; & Lt; - div 6 a.img - & gt;

When I hover over an .img in div 1, it shows that the device is below IMG in 4.

This is CSS I

  a {cursor: default; Status: Relative; Text-decoration: None; Z-index: 1; } A: Hover span {display: block; Status: Completed; Background: #ffffff; Limit: 1px solid #cccccc; Color: # 6c6c6c; Max-width: 210px; Padding: 5px; Z-index: 2; }   
 Any help would be great thanks,   
 
 
  a  to  display: block  tag