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>

@AlienArrays It looks possible.. http://jsfiddle.net/NsSLL/ unless I missed something? — Josh Crozier, Jan 31 '14 at 04:19
@JoshC you are 2 steps away from saving me from an all nighter! Thank you so much for your help it is almost perfect! Added 2 questions below. — Thesis, Jan 31 '14 at 06:46
@JoshCrozier Sorry something strange is going on with my point totals. I selected your answer as the accepted answer because it was the sample to pointed me in the right direction and for some reason it deducted points from my total. I'm going to let it sit for few minutes and select your answer again. — Thesis, Sep 01 '14 at 14:30

score 4 · Accepted Answer · edited May 23 '17 at 11:49

4

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

edited May 23 '17 at 11:49

Community

1
1

answered Jan 31 '14 at 04:04

Josh Crozier

233,099
56
391
304

here is my modified JFiddle and the updated code for the room. 2 changes and it will be perfect. I need the selected image below the div to fade out as well as the corresponding background image will be transparent. And I need the overlay to left align in the same position (all the way to the left and not left align with the image) that is why initially I was attaching to a container. http://jsfiddle.net/ThesisDesign/y44HA/2/ – Thesis Jan 31 '14 at 06:48
I was able to get the div positioning to work but still having trouble fading out all images instead of just the none hover images. – Thesis Jan 31 '14 at 23:11
@ThesisDesign I'll take a look at it, do you have an updated example? – Josh Crozier Jan 31 '14 at 23:11
thank you so much for responding. Here is the latest fiddle. Everything is perfect. Can't believe something that seemed so simple has had me stumped like this. I just need the hover image to fade out as well. http://jsfiddle.net/ThesisDesign/6jEjG/1/ – Thesis Feb 01 '14 at 00:40
1

just wanted to let you know that I figured it out. I had to frame in each div. Here is the final code. Thanks again for all of your input. http://jsfiddle.net/ThesisDesign/YLNHp/5/ – Thesis Feb 02 '14 at 02:38

score 0 · Answer 2 · answered Feb 04 '14 at 01:57

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!

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

2 Answers2