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

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: “Fade Out Other Images in Row or Gallery on Mouseover and Transition a Description DIV”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">

DTE

DTE

DTE

</div>

solution

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