Question

我已经在不同的方式努力工作了好几天，我无法做到正确。我已经完成了我需要的一半（图像淡入/淡出）但是无法使描述div按照我想要的方式工作。我想连续拍摄3张图像，未选中的图像会逐渐淡出。

然后我需要为每个图像添加一个唯一的描述div。在未选择的图像淡出之后，适当的div淡入/转换。我能够附加一个desc div包装器，但我需要的是每个图像的唯一div。 div最终会保留一个png背景图像（比在CSS中重新创建我想要的更容易）。帮助......我整天都被困在这一个。

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

我很确定你可以在纯CSS中实现这一点。

这是一个结合我过去的一些答案的答案。

EXAMPLE HERE

为了在悬停时淡出其他图片，请使用以下内容:(相关answer）

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

至于添加悬停的描述，请使用我的this other answer方法。

.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

通过房间的一些很好的帮助和建议，我能够达到预期的效果。使用纯CSS / HTML绝对可以做到这一点。

这是小提琴。 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>

再次感谢所有帮助过的人！

在鼠标悬停时淡出行或图库中的其他图像并转换描述DIV

2 个答案: