<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS pop-up</title>
<style>
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:100%;
background-color:#fcfcfc;
}
#container {
width:960px;
margin:auto;
}
#hover-item {
position:relative;
cursor:pointer;
}
#hover-item span {
display:none;
position:absolute;
top:0;
left:20px;
z-index:1;
width:200px;
padding:10px;
border:1px solid #630;
border-radius:5px;
background-color:#fdb;
box-shadow:4px 4px 4px #999;
font-size:75%;
color:#630;
cursor:default;
}
#hover-item:hover span {
display:block;
}
</style>
</head>
<body>
<div id="container">
Hover over this...
<span id="hover-item">
<img src="http://www.webmasterworld.com/theme/default/gfx/wilk.gif" alt="">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis.
</span>
</span>
...to see some hidden text displayed.
</div>
</body>
</html>
|
