Fade Out Other Images in Row or Gallery on Mouseover and Transition a Description DIV

Question

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.

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.

CSS

.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;
}

HTML

<div class="imgwrap">

    <img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" alt="DTE" />

    <img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" alt="DTE" />

    <img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" alt="DTE" />  



</div> 

Answer 1

I'm pretty sure you could achieve this in pure CSS.

Here is an answer using a combination of some of my past answers.

EXAMPLE HERE

In order to fade out the other images on hover, use something like this: (related answer)

#parent:hover > .image {
    opacity:1;
}
#parent:hover > .image:not(:hover) {
    opacity:.3;
}

As for adding a description on hover, use the approach from this other answer of mine.

.image {
    position:relative;
    display:inline-block;
    margin:10px;
    transition:all 2s;
    -webkit-transition:all 2s;
    -moz-transition:all 2s;
}
.overlay {
    opacity:0;
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .5);
    border:10px solid red;
    top:0;
    left:0;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    color:white;
    padding:12px;
    font-size:20px;
    transition:opacity 2s;
    -webkit-transition:opacity 2s;
    -moz-transition:opacity 2s;
}
.image:hover .overlay {
    opacity:1;
}

Answer 2

With some great help and suggestions from the room I was able to reach the desired result. It is definitely possible to do this with pure CSS/HTML.

Here's the fiddle. http://jsfiddle.net/ThesisDesign/YLNHp/5/.

CSS

#parent {
position:relative;
display:inline;
float:left;
z-index: 5;
border-style:solid;
border-width:1px;
 width:1400px;
height:250px;
}

.image {
position:relative;
z-index: 10; 
display:inline;
float:left;
margin-right:187px;
height: 250px;
width: 250px
transition:opacity 0.5s ;
-webkit-transition:opacity 0.5s ease-out 1s;
-moz-transition:opacity 0.5s ease-out 1s;
-o-transition:opacity 0.5s ease-out 1s;
-ms-transition:opacity 0.5s ease-out 1s;
}

.overlay1 {
opacity:0;
position:absolute;
z-index: 4; 
width:1109px;
height:250px;
background:rgba(0, 0, 0, 0);
top:0;
left:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:white;
padding:0px;
font-size:20px;
 transition:opacity 1s ;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s;
}

#frame1:hover .overlay1 {
opacity:1;
z-index: 9; 
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
transition:opacity 1s ;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s; 
} 

.overlay2 {
opacity:0;
position:absolute;
z-index: 4;
width:1109px;
height:250px;
background:rgba(0, 0, 0, 0);
top:0;
left:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:white;
padding:0px;
font-size:20px;
transition:opacity 1s ;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s;
}

#frame2:hover .overlay2 {

opacity:1;
z-index: 9; 
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
transition:opacity 1s ;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s;
    }  

.overlay3 {
opacity:0;
position:absolute;
z-index: 4;
width:1109px;
height:250px;
background:rgba(0, 0, 0, 0);
top:0;
left:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
color:white;
padding:0px;
font-size:20px;
transition:opacity 1s ;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s;
}

#frame3:hover .overlay3 {
opacity:1;   
z-index: 9; 
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
transition:opacity 1s ;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s;
}

#frame1 {

display:inline-block;
}

#frame2 {

display:inline-block;
}

#frame3 {

display:inline-block;
}

#parent:hover  .image {
opacity:0;
transition:opacity 0.5s ease-out 0 ;
-webkit-transition:opacity 0.5s ease-out 0s;
-moz-transition:opacity 0.5s ease-out 0s;
-o-transition:opacity 0.5s ease-out 0s;
-ms-transition:opacity 0.5s ease-out 0s;
}

#parent:hover    .image:not(:hover) {
opacity:.0;
}

HTML

<div id="parent">

<div id="frame1">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles1C2.png" /></div>
<div class="overlay1"><img src="https://dl.dropboxusercontent.com/u/236154657/Mouseover- 
Background1d.png"/></div>
</div>

<div id="frame2">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles2C2.png" /> </div>  
<div class="overlay2"><img src="https://dl.dropboxusercontent.com/u/236154657/Mouseover-
Background2d.png" /></div>
</div>

<div id="frame3">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/236154657/Niche-Circles3C2.png" /></div>
<div class="overlay3"><img src="https://dl.dropboxusercontent.com/u/236154657/Mouseover-
Background3d.png" /></div>    
</div>     

</div>

Thanks again to everyone the helped!