Trying to get images to change upon hover with clickable areas

Question

I'm just working on a little side project and am having a bit of trouble figuring out what the best way to achieve an effect and was hoping someone could point me in the right direction. The website is [redacted], and you can check out [redacted] for all the code I've used so far. A code block is located at the bottom of this post.

It's a very simple concept, and the way I would like this to work is:

1. Upon hovering over my body, different icons across my entire body fade in at once.

2. When hovering over a specific icon, that icon gets brighter (more opaque).

3. The user can click on one of these areas upon which other divs will fade in. (this will probably be done with jquery)

As you can see, Step 1 is working. I currently have two images, one which is plain, and one contains all the features that I would like visitors to be able to hover over on and interact with. They are absolutely positioned on top of each other, with one of them being invisible until it's been hovered over.

Like the image that goes from being invisible to opaque upon hover, I was hoping that I would create a few more images of myself, one for each of the features that would be highlighted. For example, when hovering over the heart, the image would get replaced with a new image of me that has a brighter heart.

I guess my issue is that I don't really know what's the best way to achieve this. I hope I've been clear with my explanation, and I'd really appreciate some help with this! Image maps didn't seem to be the solution (I may be wrong though) and I read they're fairly outdated. It's been driving me nuts!

Thanks in advance everyone,

Patrick

    .fade {
     opacity: 0;
     transition: opacity .25s ease;
     -moz-transition: opacity .25s ease;
     -webkit-transition: opacity .25s ease;
     }
    .fade:hover {
     opacity: 1;
     }
    <div style="height:100%">
      [redacted]   
    </div>

Answer 1

Quick answer is that you need to use z-index's and then apply a hover class to the element to achieve step 2. Step 3 obviously will need some js.... give me a few minutes to play around with the fiddle

Update

I couldnt get the javascript to work right awayand I dont have a lot of time so Ill give you this to start

http://jsfiddle.net/Et2Wp/2/

You are loading an image on top of another image and that wont work for what you are trying to accomplish. You need to create each item as a seperate element and absolute position them on your body. Each element is represented by a colored square right now, obviously you would style it with an image/background-image of what item you want.

I have a main class on each of the elements that fade in, this is so you can apply css display:none and then use javascript to fade them all in on a hover.

To achieve step two you just need to apply a :hover class to each of the elements ids of whatever styling you want

Finally to achieve step 3, you need to hide another set of divs (ie. <div id="phoneContent" )

Use javascript to bring them in on a click event with something like

$('#phone').click(function() {
 $('#phoneContent').slideToggle();
});

I can come back and finish it later if you still have issues but I gotta run right now, hope this helps

Answer 2

You can see here, a hover on with Jquery.

Live Example

Just hit run and click on generated link to check it out. I know it looks like you are trying to use CSS, but for instances like these to work better across multiple browsers. Jquery is a better option.

You can see images appear on hover and disappear on hover off.

Answer 3

You are doing this the wrong way. Each icon should be a separate element (img or div with background). Then you can easily do any effects you like.

Answer 4

If you're positioning the images absolutely, you could just add an element for each icon and position them absolutely.

ie

etc.

That way the icons will all fade in together initially and then highlight when you have over each individually.

Obviously you'll have to size the images more statically. ie height: 500px; instead of height:100%;