CSS Tooltips and Popups

Popups & Things

A nifty little script from Paul Armstrong that works in IE 6 using an unordered list. Check out his site for any updates or bug fixes.

Images appear here on hover

CSS

.hovers.working a:hover { background: none; }
.hovers a img {
width: 0;
height: 0;
border: 0;
}

.space, .hovers a:hover img {
position: absolute;
top: 290px;
left: 500px;
width: 100px;
height: 100px;
border: 1px solid #000;
}

.lists { margin-left: 100px; }

HTML

Pop Up Image Effect

When you hover your mouse over the thumbnail the larger image appears beside it. Move your mouse off the thumbnail image to pop-down the enlarged image.

The large image is already displayed at 1px by 1px then "pops up" on mouse over.

CSS

#pic {
background-color: #FFFFFF;
position: relative;
width: 90px;
height:78px;
}

#pic a .large {
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}

#pic a.p1, #pic a.p1:visited {
background: #FFFFFF;
border: 1px solid #666666;
padding:7px;
display: block;
height: 58px;
left: 0;
text-decoration: none;
top: 0;
width: 90px;
}

#pic a.p1:hover {
background-color: #ffffff;
color: #000000;
text-decoration: none;
}

#pic a.p1:hover .large {
border: 1px solid #000000;
display: block;
height: 140px;
left: 150px;
padding:7;
position: absolute;
top: -40px;
width: 226px;
}

HTML