CSS Picture pop up

[Toon]

This shows the simple style sheet to have pop up pictures, great for stock sites or a shopping site...

http://moneytreesystems.com/css/picpopup.html

Code here...

body {
background: #FFFFFF;
color: #000000;
font-family: verdana, arial, sans-serif;
font-size: 0.8em;
margin: 20px 0px 0px 0px;
padding: 0;
text-align: left;
}

h2 {
color: #C2C7BE;
font: normal small-caps bold 2.5em Verdana, sans-serif;
text-decoration: underline;
}

.right {
font-size: 1.0em;
padding-right: 100px;
text-align: right;
}

#info {
border: 1px solid #C2C7BE;
margin-left: 80px;
margin-right: 80px;
margin-top: 20px;
padding: 0px 15px 0px 15px;
position: relative;
}

#info a, #info a:visited {
color: #8A9483;
text-decoration: none;
}

#info a:hover {
color: #9BA495;
text-decoration: underline;
}

#pic {
background-color: #FFFFFF;
left: 10px;
position: relative;
top: 10px;
width: 135px;
}

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

#pic a img {
border: 0;
}

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

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

#pic a.p1:hover .large {
border: 1px solid #000000;
display: block;
height: 233px;
left: 150px;
position: absolute;
top: -60px;
width: 300px;
}

#top {
margin-left: 80px;
}

[Kelly Creative]

It is NOT perfect but it does validate.

Indeed who needs perfection when you can validate.

(F*cking web monkies)

[Mack]

Originally Posted by Kelly Creative

Indeed who needs perfection when you can validate.

(F*cking web monkies)

Kelly, when can we see some of your work?

[dannynosleeves]

very cool find!

[tommylogic]

Originally Posted by Mack

Kelly, when can we see some of your work?

I searched Google and only found these...

[lolly]

Every simple thing has a use, could come in handy

[tommylogic]

Here's a plethora of pure CSS techniques .. if you're interested

Stu Nicholls CSS Play

[LeadMagnet]

Awww... i hoped it was gonna be this kinda popup

[Dunce]

Simple but very neat.

PS. If you're going to click on tomylogics google link be sure you have google adult filtering switched on in the office

[Diablos]

Originally Posted by Dunce

PS. If you're going to click on any of tomylogics links be sure you are not in an office or near other humans

Fixed for accuracy.

I like the CSS trick but I think it could easily confuse non websavy people looking at a portfolio.