In this post user coothead posted a CSS tooltip solution. Here's a modified version which will do what you want. Just replace the "Insert image x here" text in each link with an <img .../> tag pointing to your image file and you're good to go. The images should be 176px wide by 238px high but if you want to use different sizes you'll have to change some values in the styling.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modified CSS tooltip example - courtesy of coothead</title>
<style media="screen">
#staff {
position:relative;
width:976px;
height:600px;
padding:20px;
margin:0 auto;
list-style-type:none;
}
#staff li {
position:absolute;
}
#staff li:hover div {
display:block;
}
#staff a {
display:block;
width:176px;
height:238px;
box-sizing:border-box;
border:1px solid #b7d6e9; /* Remove this line after images are inserted. */
}
#staff div {
display:none;
position:absolute;
box-sizing:border-box;
width:400px;
height:200px;
padding:10px;
border:1px solid #b7d6e9;
border-radius:10px;
background-color:#fff;
background-image:linear-gradient(to bottom,#fff,#b7d6e9);
box-shadow:inset 0 0 20px #999,4px 4px 4px #999;
color:#669;
}
#one {
top:10px;
left:0;
}
#one div {
top:300px;
left:308px;
}
#two {
top:10px;
left:210px;
}
#two div {
top:300px;
left:98px;
}
#thr {
top:10px;
left:420px;
}
#thr div {
top:300px;
left:-112px;
}
#fou {
top:10px;
left:630px;
}
#fou div {
top:300px;
left:-322px;
}
#fiv {
top:10px;
left:840px;
}
#fiv div {
top:300px;
left:-532px;
}
#staff h6 {
margin:10px 0;
text-align:center;
text-transform:uppercase;
}
#staff p {
font-size:75%;
}
</style>
</head>
<body>
<ul id="staff">
<li id="one">
<a href="#">Insert image 1 here</a>
<div>
<h6>Staff Member 1</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="two">
<a href="#">Insert image 2 here</a>
<div><h6>Staff Member 2</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="thr">
<a href="#">Insert image 3 here</a>
<div>
<h6>Staff Member 3</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fou">
<a href="#">Insert image 4 here</a>
<div><h6>Staff Member 4</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fiv">
<a href="#">Insert image 5 here</a>
<div>
<h6>Staff Member 5</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
</ul>
</body>
</html>
Image with sliding description panel using CSS3 transitions- please help
Reply With Quote
Bookmarks