Question

the design calls for an image gallery with thumbnails for different characters and when u roll over a thumbnail a larger version of the image appears and in a div to the left with a header and description for each character also appears.

1) is there a way to have a rollover control both divs? (enlarged image and description)

and

2) how would i need to go about syncing this up with a cms?

thank you for reading 🙂

Answer 1

Try this for a start, not sure what cms you’re using etc so nfi how to answer that part:

HTML:

<a class="info" href="" onclick="return false;">
  <img src="thumb.jpg"/>
  <span><img src="large.jpg" /><br />
   description goes here</span>
</a>

CSS:

a.info              {z-index:24; position:relative; color:#999; font-size:11px; text-transform:none; font-weight:normal; text-decoration:none; border:1px solid #999; padding-left:3px; padding-right:3px; margin:5px;}
a.info:hover        {z-index:25; text-decoration:none; color:#333; border-color:#333;}
a.info span         {display:none; position:absolute; top:15px; left:15px; width:240px; color:#000; font-size:12px; background-color:#fff; padding:2px; border:1px solid #333;}
a.info:hover span   {display:block;}