I want to create a page which essentially has a black and white photograph of, say, 5 people. Now, on hover over each person, I want that person to light up and a dialog of information to be displayed next to it.

Can anyone please tell me how to go about doing this?

Thanks in advance. :)

I want to create a page which essentially has a black and white photograph of, say, 5 people. Now, on hover over each person, I want that person to light up and a dialog of information to be displayed next to it.

Can anyone please tell me how to go about doing this?

Thanks in advance. :)

• javascript
• jquery
• css

Share Improve this question Follow asked Nov 13, 2012 at 10:15 FahadFahad 1,44433 gold badges2121 silver badges4141 bronze badges 1

• you might need to use CSS sprites for this. – Om3ga Commented Nov 13, 2012 at 10:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Either use an image map or make "invisible" divs on top of each person. Both have their pro's and cons but an Image Map was created specifically for what you need.

To "Light them up" your only choice would be to overlay a .png image (on :hover of invisible div) with a transparent background with a cut out of that person, but edited to be "light"

html:

 <a href="#" class="highlightit"><img border="0" src="http://twitter.github./bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"> 
   <span> something </span>
 </a>

css:

.highlightit img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
 }

.highlightit:hover img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
 }

.highlightit:hover span{
  display:block;
}


.highlightit span{
  font-size:20px;
  color:white;
  background:black;
  text-decoration:none;
  display:none;
  width:100%;
  padding:10px;
  position:relative;
  margin-top:-20px;
}

check this fiddle for a preview http://jsfiddle/wandarkaf/cNC5G/ .

Two possible methods:

1. CSS Sprites

   • Create one large image which contains the original image plus the image in each of it's different hover states (probably stacked vertically).

   • Place the image as a background image of a DIV sized to show just the original image(or Figure or whatever).

   • Abolsutely position some links in the DIV to where you want them to be (making sure your container DIV is relatively positioned).

   • On hover of one of your links adjust the background position of the image to show the correct image and to display a hidden DIV/SPAN/WHATEVER containing you text dialogue.

2. Javascript.

   • Same method as above but using separate images which are called on hover/mousein or whatever then again call a hidden dialogue to show. Plenty of tooltip plugins available for this purpose.