Javascript: Hover over Issues & How can I structure the html efficiently?

Question

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 :)

Heres what the Javascript written is suppose to do:
1) When person opens page, all they see are a collection of images.
2) When the cursor / mouse is hovered over the image 2a) info text fadesIn on the bottom and right ( .rotate ) of the image, 2b) the grayscale effect lowers from 100% to 10% , and 2c) .detail fadesIn at a fixed position on the bottom right corner of the page.
3) All images are associated with a number. That number is then used so that each image can have its own content & text / position: / color: / etc.

And here are the problems I'm facing with:
1) When an image that has its position set as bottom , it moves up when a curser hovers over it.
2) Upon hovering, when the cursor hovers over the images text, it for some reason repeatedly fadesIn and fadesOut .
3) How can I set the .detail to be positioned to the bottom right of the page for all images?
4) How can the image number (set as .rotate ) placed outside of the image and be vertically centered from the images height?

Here is a jsfiddle for visual / functionality reference: jsfiddle

Thank you in advance!

JS

$('.targetDiv').hide();

$('.show').mouseover(function () {
    $('.targetDiv').hover();
    $('.info' + $(this).attr('target')).fadeIn();
});

$('.show').mouseout(function () {
    $('.targetDiv').fadeOut();
    $('.info' + $(this).attr('target')).fadeOut();
});

HTML

<div class="show" id="subject01" target="01">
    <div class="frontpage-img-wrap">
        <img src="http://i61.tinypic.com/fw3tpc.jpg" width="250" height="auto" alt="" />
    </div>
    <div class="targetDiv info01">
         <h2>Name</h2>

         <h4>Text</h4>

        <p class="rotate">Image Number</p>
        <p class="detail">Image Detail
            <br/>Detail
            <br/>More Detail.</p>
    </div>
</div>
<!-- END 01 -->
<div class="show" id="subject02" target="02">
    <div class="frontpage-img-wrap">
        <img src="http://i59.tinypic.com/ogeybn.jpg" width="150" height="auto" alt="" />
    </div>
    <div class="targetDiv info02">
         <h2>Name</h2>

         <h4>Text</h4>

        <p class="rotate">Image Number</p>
        <p class="detail">Image Detail
            <br/>Detail
            <br/>More Detail.</p>
    </div>
</div>
<!-- END 02 -->

CSS

*, 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;
}

Answer 1

Addressing only your fadeIn/Out issues:

I'd really suggest using pure CSS for this. The JS just complicates it:

.targetDiv { opacity: 0; transition: opacity 0.5s linear; }

.frontpage-img-wrap:hover + .targetDiv { opacity: 1; }

So don't hide() (creates display: none; ) your text at all, but just drop opacity to 0, set a transition (for that nice fade effect... make sure to use vendor prefixes with transition ), then raise opacity to 1 whenever .frontpage-img-wrap is hovered.

Edit

As far as your bottom-aligned elements: it is because of the $('.targetDiv').hide(); (translated display: none; ) that is pops up when hovered... it needs to maintain size. Doing my CSS trick of just turning off the opacity will let the text keep its size. But if you must do it with JS, you need to set the size of the whole .show element so it doesn't resize on hover.

Answer 2

You can solve all your issues with CSS only JSBin here

New CSS

   .rotate {
      display:block;
      position:absolute;
      font-size: 12px;
      line-height: 18px;
      font-family: monospace;
      letter-spacing: 1px;
      margin: 0;
      text-align: center;
      top:45%;
      left:95%;
      height:18px;
      visibility: hidden;
      opacity:0;
      -webkit-transition: all 250ms linear;
      -o-transition: all 250ms linear;
      transition: all 250ms linear; 

      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  .targetDiv { 
    position:absolute; 
    width:100%; 
    visibility: hidden;
    opacity:0;
    -webkit-transition: all 250ms linear;
    -o-transition: all 250ms linear;
    transition: all 250ms linear; 
  }

  .show:hover .targetDiv {
    visibility: visible;
    opacity:1;
  }  
  .show:hover .rotate {
    visibility: visible;
    opacity:1;
  } 

HTML Changes

• Take <p class="rotate"> ... </p> out of targetDiv and move it into frontpage-img-wrap

Notes

• position:absolute;width:100% solves the bottom positioned div from jumping up on hover

• fade in/out effects are done with transition opacity and visibility

• easier to debug since you can now for the :hover state in developer tools

• The position of rotate is inexact - you may need to calculate image height with JS, then set the rotate div's HEIGHT as the images width