javascript - Change style element of child to display unique div on hover of parent page element 36 occurences -

i have 36 pictures. have verbose , repetitive approach using 72 ids , 72 css lines. think replaced 1 jquery function specifying children (or similar) can't figure out.

when hovering on given thumbnail want custom div custom text , resized img show floating on center of screen.

i accomplished goals in brute-force way: not dry @ 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 love you!</p>           <p>hello candy cane love you!</p>           <p>you taste great</p>           <p>why 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 bottle of rum</p>            <p>land ahoy</p>        </div>    </span> 

repeat above 2 blocks 2 unique ids each 34 more times, additionally 2 lines of css each of 36 items. of course need 36 divs not 72 ids , repetitive css. i'd able 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 on 31 more times*/ 

i find attempt below

$('.art-item').children().hover(function(){ $(this).fadein(500); }, function(){ (this).fadeout(500); }); 

i somehow deal sticky issue of re-sizing pictures 100% over-ride id specified 30% somehow.

my attempt @ jquery hides thumbnail (which don't want) , not show hidden div. i've tried next() etc no luck finding right syntax.

#art {      background-color: rgb(142, 169, 186);  }  .art-item {      display: inline-block;      width: 30%;      margin: 1%;  }  .art-item img {      width: 100%;      height: auto;  }    .smack-in-middle {      position:fixed;      left:300px;      top:100px;      z-index: 50;      background-color: white;      opacity: 0;      pointer-events: none;      transition: opacity .3s ease;  }    .art-item:hover .smack-in-middle {      opacity: 1;      pointer-events: all;  }

<div id="art"> <span class="subject-title">express - make stuff</span>   <span class="art-item">       <img src="http://placehold.it/100x100">         <div class="smack-in-middle">          <img src="http://placehold.it/100x100">          <p style="float:right;">hello world love you!</p>            <p>hello candy cane love you!</p>            <p>you taste great</p>            <p>why in december?</p>            </div>          </span>   <span class="art-item">        <img src="http://placehold.it/100x100">        <div class="smack-in-middle">            <img src="http://placehold.it/100x100">            <p>yarr! piracy!</p>             <p>and bottle of rum</p>             <p>land ahoy</p>         </div>     </span>    </div>

i added class of art-item each parent span tag id of art-x. also, applied width: 30% , margin: 1% these elements instead of image.

instead of toggling between display: none , display: block on hover, toggling between opacity: 0 opacity: 1 - allow create nice transitions , easing.

by toggling opacity, need modify pointer-events attribute ensure no 1 able select of child elements of .smack-in-middle