Html 在鼠标上方淡出行或库中的其他图像，并将其转换为描述DIV

几天来，我一直在用不同的方法来做这件事，但我做不好。我已经完成了我需要的一半（图像淡入/淡出），但无法使描述div按我希望的方式工作。我想有3个图像在一行和那些没有选择淡出

然后，我需要一个唯一的描述div为每个图像。未选择的图像淡出后，相应的div淡入/过渡。我能够在包装上附加一个desc div，但我需要的是每个图像的唯一div。div最终将保存一个png背景图像（比在CSS中重新创建我想要的更容易）。救命啊，这件事我忙了一整天

CSS

HTML

---

我非常肯定，您可以在纯CSS中实现这一点

下面是一个结合了我过去的一些答案的答案

要淡出悬停时的其他图像，请使用如下内容：（相关）

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

---

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

下面是一个结合了我过去的一些答案的答案

要淡出悬停时的其他图像，请使用如下内容：（相关）

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

---

在房间里的大力帮助和建议下，我终于达到了预期的效果。使用纯CSS/HTML绝对可以做到这一点

这是小提琴

CSS

HTML

---

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

在房间里的大力帮助和建议下，我终于达到了预期的效果。使用纯CSS/HTML绝对可以做到这一点

这是小提琴

CSS

HTML

---

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

@AlienArrays看起来有可能。。除非我错过了什么？@JoshC你离把我从通宵中解救出来还有两步之遥！非常感谢您的帮助，它几乎完美无瑕！在下面添加了两个问题。@JoshCrozier抱歉，我的总分有点奇怪。我选择你的答案作为被接受的答案，因为它是为我指出正确方向的样本，并且由于某种原因，它从我的总分数中扣除了分数。我将让它静置几分钟，然后再次选择您的答案。@Alienarray这看起来是可能的。。除非我错过了什么？@JoshC你离把我从通宵中解救出来还有两步之遥！非常感谢您的帮助，它几乎完美无瑕！在下面添加了两个问题。@JoshCrozier抱歉，我的总分有点奇怪。我选择你的答案作为被接受的答案，因为它是为我指出正确方向的样本，并且由于某种原因，它从我的总分数中扣除了分数。我将让它静置几分钟，然后再次选择您的答案。这是我修改过的JFiddle和房间的更新代码。2个变化，它将是完美的。我需要选择的图像下方的div淡出以及相应的背景图像将是透明的。我需要覆盖层在相同的位置左对齐（一直向左，而不是与图像左对齐），这就是为什么最初我要连接到一个容器。我能够使div定位正常工作，但仍然无法淡出所有图像，而不仅仅是无悬停图像。@该设计我会看一看，您有更新的示例吗？非常感谢您的回复。这是最新的小提琴。一切都很完美。真不敢相信这么简单的事情竟然让我这么难堪。我只需要悬停图像淡出以及。只是想让你知道我知道了。我必须在每个分区中设置帧。这是最终代码。再次感谢您的所有意见。这是我修改过的JFiddle和房间的更新代码。2个变化，它将是完美的。我需要选择的图像下方的div淡出以及相应的背景图像将是透明的。我需要覆盖层在相同的位置左对齐（一直向左，而不是与图像左对齐），这就是为什么最初我要连接到一个容器。我能够使div定位正常工作，但仍然无法淡出所有图像，而不仅仅是无悬停图像。@该设计我会看一看，您有更新的示例吗？非常感谢您的回复。这是最新的小提琴。一切都很完美。真不敢相信这么简单的事情竟然让我这么难堪。我只需要悬停图像淡出以及。只是想让你知道我知道了。我必须在每个分区中设置帧。这是最终代码。再次感谢您的所有意见。

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

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

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

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

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

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