title: Javascript: Hover over Issues & How can I structure the html efficiently?
body: <p>I've written a Javascript that triggers upon a person interacting an image, but I have some difficulty tackling the issues that I'm having. Please take a look :)</p>
  
  <p><strong>Heres what the Javascript written is suppose to do:</strong><br/>
  <strong>1)</strong> When person opens page, all they see are a collection of images.<br/>
  <strong>2)</strong> When the cursor / mouse is hovered over the image <strong>2a)</strong> <code>info</code> text <code>fadesIn</code> on the bottom and right (<code>.rotate</code>) of the image, <strong>2b)</strong> the <code>grayscale</code> effect lowers from <code>100%</code> to <code>10%</code>, and <strong>2c)</strong> <code>.detail</code> <code>fadesIn</code> at a fixed position on the bottom right corner of the page.<br/>
  <strong>3)</strong> All images are associated with a number. That number is then used so that each image can have its own content &amp; text / <code>position:</code> / <code>color:</code> / etc.</p>
  
  <p><strong>And here are the problems I'm facing with:</strong><br/>
  <strong>1)</strong> When an image that has its position set as <code>bottom</code>, it moves up when a curser hovers over it.<br/>
  <strong>2)</strong> Upon hovering, when the cursor hovers over the images text, it for some reason repeatedly <code>fadesIn</code> and <code>fadesOut</code>.<br/>
  <strong>3)</strong> How can I set the <code>.detail</code> to be positioned to the <code>bottom</code> <code>right</code> of the page for all images?<br/>
  <strong>4)</strong> How can the image number (set as <code>.rotate</code>) placed outside of the image and be vertically centered from the images height? </p>
  
  <p>Here is a jsfiddle for visual / functionality reference: <a href="http://jsfiddle.net/kenhimself/53bv6hyu/7/" rel="nofollow">jsfiddle</a></p>
  
  <p>Thank you in advance!</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.targetDiv').hide();
  
  $('.show').mouseover(function () {
      $('.targetDiv').hover();
      $('.info' + $(this).attr('target')).fadeIn();
  });
  
  $('.show').mouseout(function () {
      $('.targetDiv').fadeOut();
      $('.info' + $(this).attr('target')).fadeOut();
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="show" id="subject01" target="01"&gt;
      &lt;div class="frontpage-img-wrap"&gt;
          &lt;img src="http://i61.tinypic.com/fw3tpc.jpg" width="250" height="auto" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="targetDiv info01"&gt;
           &lt;h2&gt;Name&lt;/h2&gt;
  
           &lt;h4&gt;Text&lt;/h4&gt;
  
          &lt;p class="rotate"&gt;Image Number&lt;/p&gt;
          &lt;p class="detail"&gt;Image Detail
              &lt;br/&gt;Detail
              &lt;br/&gt;More Detail.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- END 01 --&gt;
  &lt;div class="show" id="subject02" target="02"&gt;
      &lt;div class="frontpage-img-wrap"&gt;
          &lt;img src="http://i59.tinypic.com/ogeybn.jpg" width="150" height="auto" alt="" /&gt;
      &lt;/div&gt;
      &lt;div class="targetDiv info02"&gt;
           &lt;h2&gt;Name&lt;/h2&gt;
  
           &lt;h4&gt;Text&lt;/h4&gt;
  
          &lt;p class="rotate"&gt;Image Number&lt;/p&gt;
          &lt;p class="detail"&gt;Image Detail
              &lt;br/&gt;Detail
              &lt;br/&gt;More Detail.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- END 02 --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
      margin:0;
      padding:0
  }
  fieldset, img {
      border:0
  }
  h1, h2, h3, h4, h5, h6 {
      font-size:100%;
      font-weight:normal
  }
  a img {
      border:none
  }
  p, li h2, body, h4, h4 a {
      font-family:"Courier New", Courier, monospace;
      font-size: 12px;
      line-height: 18px;
      font-weight: normal;
      letter-spacing: 1px;
      overflow-x: hidden;
  }
  h2 {
      font-family:"Apercu Bold", sans-serif;
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px;
      font-size: 11px;
      text-align: center;
  }
  h4 {
      text-transform: uppercase;
      text-align: center;
  }
  a {
      color: red;
      text-decoration: none;
  }
  header a:hover {
      border-bottom: 1px solid;
  }
  .frontpage-img-wrap, .img-placeholder, .image-wrapper-inner {
      margin: 0 0 18px;
  }
  .entry {
      text-align: center;
      position: absolute;
  }
  .frontpage-img-wrap {
      position: relative;
  }
  .frontpage-img-wrap img {
      margin: 0;
      display: block;
  }
  .rotate {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      position: absolute;
      right: -45px;
      top:50%;
      font-size: 12px;
      line-height: 18px;
      font-family: monospace;
      letter-spacing: 1px;
      margin: 0;
  }
  .frontpage-img-wrap {
      display:block;
  }
  #subject01 {
      left: 50px;
      top: 50px;
      position: fixed;
  }
  #subject02 {
      right: 50px;
      bottom: 100px;
      position: fixed;
  }
  h6 {
      position: fixed;
      top:40%;
      margin: 0 auto;
      text-align: center;
      font-family: helvetica;
      font-size: 100px;
      font-weight: bold;
      font-style: normal;
  }
  </code></pre>