I have 36 pictures. I currently have a verbose and repetitive approach using 72 ids and 72 css lines. I think it could be replaced by one jQuery function specifying children (or similar) but I can't figure it out.

When hovering on a given thumbnail I want a custom div with custom text and resized img to show floating over the center of the screen.

I successfully accomplished my goals in a brute-force way: Not DRY at all

```
<div class="left-pcontainer">
<div class="make-fixed">
<div id="art">
  <span class="subject-title">express - make stuff</span>

  <span id="art1">
    <img   src="p-imgs/candyCaneCircle.png" >
       <div id="smack1" class="smack-in-middle">
        <img  src="p-imgs/candyCaneCircle.png" style="width:100%;">
        <p style="float:right;">Hello World I love you!</p>  
        <p>Hello Candy Cane I love you!</p>  
        <p>You taste great</p>  
        <p>Why only in December?</p>  

      </div>      
  </span>          

  <span id="art2"> 
    <img  src="p-imgs/PirateCircle.png" >
      <div id="smack2" class="smack-in-middle">
          <img  src="p-imgs/PirateCircle.png" >
          <p>Yarr! Piracy!</p> 
          <p>and a bottle of rum</p> 
          <p>Land Ahoy</p> 
      </div> 
  </span>

```

repeat above two blocks with 2 unique ids each 34 more times, additionally with two lines of css for each of the 36 items. Of course I need the 36 divs but not the 72 ids and repetitive css. I'd like to be able to adjust size editing 2 classes/ids not 72.

css:

```
#art{
  background-color: rgb(142, 169, 186);
}
#art img{
  width: 30%;
  margin: 1%;
}
.smack-in-middle{
  position:fixed;
  left:300px;
  top:100px;
  z-index: 50;
  background-color: white;
  display: none;
}
art1:hover #smack1{ display: block; }
#art1:hover #smack1 img{width:100%;}
#art2:hover #smack2{ display: block;}
#art2:hover #smack2 img{width:100%;}
#art3:hover #smack3{ display: block;}
#art3:hover #smack3 img{width:100%;}
#art4:hover #smack4{ display: block;}
#art4:hover #smack4 img{width:100%;}
#art5:hover #smack5{ display: block;}
#art5:hover #smack5 img{width:100%;}
/*and so on 31 more times*/

```

I would like to find something like my attempt below

```
$('.art-item').children().hover(function(){
$(this).fadeIn(500);
}, function(){
(this).fadeOut(500);
});

```

I also somehow deal with the sticky issue of re-sizing the pictures to 100% to over-ride their id specified 30% somehow.

my attempt at jQuery hides the thumbnail (which I don't want) and does not show the hidden div. I've also tried next() etc with no luck finding the right syntax.