title: Trying to get images to change upon hover with clickable areas
body: <p>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.</p>
  
  <p>It's a very simple concept, and the way I would like this to work is:</p>
  
  <ol>
  <li><p>Upon hovering over my body, different icons across my entire body fade in at once.</p></li>
  <li><p>When hovering over a specific icon, that icon gets brighter (more opaque).</p></li>
  <li><p>The user can click on one of these areas upon which other divs will fade in. (this will probably be done with jquery)</p></li>
  </ol>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p>Thanks in advance everyone,</p>
  
  <p>Patrick</p>
  
  <pre><code>    .fade {
       opacity: 0;
       transition: opacity .25s ease;
       -moz-transition: opacity .25s ease;
       -webkit-transition: opacity .25s ease;
       }
      .fade:hover {
       opacity: 1;
       }
      &lt;div style="height:100%"&gt;
        [redacted]   
      &lt;/div&gt;
  </code></pre>