Pasul 1. Se creaza un fisier document cu extensia html in care se adauga urmatorul script.
Desigur ca in locul imaginilor (imag1, imag2) se pot adauga link-uri catre imagini aflate pe internet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link href="stil.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<a class="thumbnail">
<img src="imag1.jpg" width="100px" height="66px" border="0" />
<span>
<img src="imag1.jpg" />
<br/> Text1........</span>
</a>
<br/> <br/>
<a class="thumbnail">
<img src="imag2.jpg" width="100px" height="66px" border="0" />
<span>
<img src="imag2.jpg" />
<br/> text2........</span>
</a>
<br/> <br/>
<a class="thumbnail">
<img src="imag3.jpg" width="100px" height="66px" border="0" />
<span>
<img src="imag3.jpg" />
<br/>text3 ...
</span>
</a>
</body>
</html>
Pasul2. Se creaza css-ul (stil.css) in care se adauga script-ul de mai jos:
.thumbnail { position: relative; z-index: 0;}
.thumbnail:hover { background-color: transparent; z-index: 50; }
.thumbnail span { position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }
.thumbnail span img { border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 60px;}
