how to show a text when hovering over an image in html and CSS?

Question

I have written this code to display 4 images in the left of the page and when hovering over an image it appears bigger at a div to the right of those images .. i want some text to show up under the big image at the right, but i can't do it. Any suggestions? Here is my code:

body{padding:20px 100px}

a img{display:block;border:none;}

.image-holder{
	float:right;
	margin:42px 560px 0px 0;
	width:300px;
	height:350px;
	background:#ffffff;
	border:10px solid #000;
	padding:3px;
	position:relative;
	z-index:1;
}
ul.links{
	list-style:none;
	margin:0 0px;
	padding:0;
	border:5px solid #000;
	border-bottom:none;
	width:100px;
	
}
.links li{
	width:100px;
	border-bottom:10px solid #000;	
}

.links li a span{
	position:absolute;
	right:682px;
	top:222em;
	width:300px;
	height:300px;
	z-index:2;
}
.links li a:hover{
	background:teal;
	color:#0f0;
	
}
.links li a:hover span {top:200px;

}
 
h1{text-align:center;margin:1em 0;}

 
	<p class="image-holder"></p> 
	<ul class="links"> 
		<li><a href="image1.jpg"><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /></span></a></li>
		<li><a href="image2.jpg"><img src="image2.jpg" width=100 height=100><span><img src="image2.jpg" width="300" height="300" alt="example image" /></span></a></li> 
		<li><a href="image3.jpg"><img src="image3.jpg" width=100 height=100><span><img src="image3.jpg" width="300" height="300" alt="example image" /></span></a></li>
		<li><a href="image4.jpg"><img src="image4.jpg" width=100 height=100><span><img src="image4.jpg" width="300" height="300" alt="example image" /></span></a></li>
	</ul> 

Answer 1

A very simple way to do it is to add the title attribute inside of your <img> tag, like this:

<img title="Your text"/>

Answer 2

I would recommend using javascript if that is valid:

<li onmouseover="onMouseOverImage(1)">
    <a href="image1.jpg">
        <img src="image1.jpg" width=100 height=100>
        <span>
            <img src="image1.jpg" width="300" height="300" alt="example image" />
        </span>
    </a>
</li>

And then add the javascript handling. If you use jQuery it would become more easier:

<script>
    function onMouseOverImage(imageNumber) {
        var text = getTextForImage(imageNumber);
        var element = document.getElementById("IdOfTextDisplay");
        element.innerHtml = text;
    }
</script>

or with jQuery:

<script>
    function onMouseOverImage(imageNumber) {
        $("IdOfTextDisplay").text(getTextForImage(imageNumber));
    }
</script>

No guarantee on syntax. ;)

EDIT: You may have to place the event registration (onmouseover="onMouseOverImage(1)") into your link (a) or img. I'm not sure right now about that.

Answer 3

body{padding:20px 100px}

a img{display:block;border:none;}

.image-holder{
	float:right;
	margin:42px 560px 0px 0;
	width:300px;
	height:350px;
	background:#ffffff;
	border:10px solid #000;
	padding:3px;
	position:relative;
	z-index:1;
}
ul.links{
	list-style:none;
	margin:0 0px;
	padding:0;
	border:5px solid #000;
	border-bottom:none;
	width:100px;
	
}
.links li{
	width:100px;
	border-bottom:10px solid #000;	
}

.links li a span{
	position:absolute;
	right:682px;
	top:222em;
	width:300px;
	height:300px;
	z-index:2;
        text-align:center;
}
.links li a:hover{
	background:teal;
	color:#0f0;
	
}
.links li a:hover span {top:200px;

}
 
h1{text-align:center;margin:1em 0;}

 
	<p class="image-holder"></p> 
	<ul class="links"> 
		<li><a href="image1.jpg"><img src="image1.jpg" width=100 height=100><span><img src="image1.jpg" width="300" height="300" alt="example image" /><em>Some Text</em></span></a></li>
	</ul> 

Simply add a tag in span after <img> tag as i used in above code and if you want to align it to center then add text-align:center; property to span css as i used above.