PDA

View Full Version : Image with sliding description panel using CSS3 transitions- please help



DBLPiccolo
10-02-2015, 03:00 AM
1) Script Title: Image with sliding description panel using CSS3 transitions

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/image_with_sliding_description_panel_using_css3_transitions/P10/

3) Describe problem: I am trying to configure this script so that there are faces that one can hover over, that are next to each other, that describes what we each do as admins. The only thing I keep coming up with is stacking images that all hover over with the same description as the first. If you visit my site: http://s15.zetaboards.com/Dragon_Ball_Legacy/index/ you'll see the images I wish to use. On the board you'll see the "Your Staff:" section under the cbox, I'd LIKE, if possible...to have the same size pic for each staff (5 people) aligned next to each other so that if you hover over each one, you see what they do, even if after moving the mouse from a previous pic it covers the other. Is this at all possible? My RPG is recently opened and atm I am leaving it for your help but it looks like we only have 1 staff member because of this, lol. PLEASE help...

Beverleyh
10-02-2015, 04:58 AM
, I'd LIKE, if possible...to have the same size pic for each staff (5 people) aligned next to each other so that if you hover over each one, you see what they do, even if after moving the mouse from a previous pic it covers the other.
OK - What have you tried already? We need to see *your* code/attempt to set this up in order to assist.


On the board you'll see the "Your Staff:" section under the cbox
Not sure where this is - there's a lot going on on that page and I don't see any obvious staff section. Please make a reduced test page in something like JSBin, JSFiddle or CodePen, showing what you've already tried, and we can try to help fix your code.

styxlawyer
10-02-2015, 04:17 PM
In this post (http://www.dynamicdrive.com/forums/showthread.php?78770-Tooltip-for-Image-Map&p=314291#post314291) 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.



<!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>