title: Fade Out Other Images in Row or Gallery on Mouseover and Transition a Description DIV
body: <p>I have been laboring over different ways to do this for days now and I can't get it right.  I have completed half of what I need (the image fade in/out) but cannot get the description div to work the way I want it to.  I want to have 3 images in a row and those that are not selected fade out.</p>
  
  <p>Then I need a unique description div for each image.  The appropriate div fades/transitions in after the non-selected images fade out.  I was able to attach a desc div the the wrapper but what I need are unique divs for each image.  The div will ultimately hold a png background image (easier than recreating what I want in CSS).  Help...I've been stuck on this one all day.</p>
  
  <p>CSS</p>
  
  <pre><code>.imgwrap {
    width:400px;
    z-index: 8; 
    position: relative;
    margin:0px auto;
    background-color:transparent;
    padding:5px;
    overflow:hidden;
  }
  .imgwrap img {
    display:inline;
    position: relative;
    float: left;
    z-index: 8; 
    width:120px;
    height:120px;
    margin:5px;
    cursor:pointer;
    -webkit-transition:opacity 0.26s ease-out;   
    -moz-transition:opacity 0.26s ease-out;   
    -ms-transition:opacity 0.26s ease-out;   
    -o-transition:opacity 0.26s ease-out;   
    transition:opacity 0.26s ease-out;   
  }
  
  
  .imgwrap:hover img {
    opacity:0.0;
  }
  
  .imgwrap:hover img:hover {
    opacity:1;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="imgwrap"&gt;
  
      &lt;img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" alt="DTE" /&gt;
  
      &lt;img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" alt="DTE" /&gt;
  
      &lt;img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" alt="DTE" /&gt;  
  
  
  
  &lt;/div&gt; 
  </code></pre>