0

I'm trying to make a roster of member photos. When a user hovers over an image, information slides out from the image or fades into view with a description and links. The roster will change frequently and the members' order may need to be adjusted by a script that calculates their score.

The part of the puzzle I'm working on now is the reveal. With help, I can now make the contents appear, but the the CSS transition is weird and awkward. What is the recommended approach to constructing such an info pane? Using z-index, perphas?

CSS

*{
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
} 


.dude>:first-child{
        width:0px;
        height:0px;
        float:left;
        visibility:hidden;
} 

   .dude:hover > :first-child {
        width: auto;
        height: auto;
        visibility:visible;
        float:none;

}

HTML

<table>
<thead><h4>Roster</h4></thead>
<tbody>
<tr>
<td><div class="dude"><div>THIS INFORMATION WILL APPEAR LIKE MAGIC</div><img alt="Scott" src="madeupphotoname.jpg" /><b>Scott</b></td>
<td><div class="dude"><div>THIS INFORMATION WILL APPEAR LIKE MAGIC</div><img alt="Sally" src="madeupphotoname2.jpg" /><b>Sally</b></td>
</tr>
</tbody>
</table>

Your patience and talent is appreciated. For any so interested, here is the jsfiddle of my project.

dadiletta
  • 299
  • 3
  • 17
  • The first thing I would say is rebuild the thing without using tables. There are much more efficient methods of building and laying out a 'gallery' such as you have here. – Paulie_D Jan 23 '14 at 20:38

1 Answers1

0

There are many ways to handle this.

This FIDDLE will show you one way

Each td contains an image and two divs. The one containing text is "hidden" and is only read when you hover over the holderdiv.

The text is moved to a div below the title, but it could be put anywhere, such as a slider, a popup, a bubble, etc...as you see fit.

I agree with Paulie_D's comments - but as a "first-cut", a table is OK.

JS

$('.holderdiv').mouseover(function(){
    $('.showme').html(  $( this ).text() );
});
$('.holderdiv').mouseout (function(){
    $('.showme').html(  '' );
});

jsFiddle: http://jsfiddle.net/timspqr/fyXby/5/

TimSPQR
  • 2,964
  • 3
  • 20
  • 29