Results 1 to 3 of 3

Thread: Image with sliding description panel using CSS3 transitions- please help

  1. #1
    Join Date
    Oct 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Image with sliding description panel using CSS3 transitions- please help

    1) Script Title: Image with sliding description panel using CSS3 transitions

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ansitions/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...
    Last edited by Beverleyh; 10-02-2015 at 04:58 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    , 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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    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>

Similar Threads

  1. Replies: 3
    Last Post: 02-06-2015, 11:14 PM
  2. Changing the color of the CSS3 push down panel
    By phphead in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-12-2014, 08:22 AM
  3. Resolved Pure CSS3 Push Down Panel | Help a newbie change color
    By a404freedom in forum CSS
    Replies: 3
    Last Post: 04-03-2014, 12:20 AM
  4. How to pause sliding panel when embedded YouTube video is clicked
    By ddhebert in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-03-2012, 08:06 PM
  5. Description panel for image on mouse roll over
    By seemoo in forum Looking for such a script or service
    Replies: 20
    Last Post: 01-22-2010, 06:48 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •