The container holding both the image and <span>
tag is your <a>
tag, we need to make sure of two things:
The elements inside the
<a>
tag stay within the container, for this we use theposition: relative;
The
<span>
is coming after the<img>
but it should be over it on hover, so we addfloat:left;
for it to stay over (this works because you have theposition: absolute
on your<span>
)Additionally, your text is likely to
float
left too because of our previous container, so I have addedclear:both
after every image. A little of your other properties likewidth
andtop
changed too.