悬停时使 div 中的图像变暗，但不是另一个子图像

Question

悬停时，我试图更改主要父级的不透明度以使主图像变暗，但我想在其上显示另一张完全不透明的图像。这是我尝试过的方法，但它不起作用。

  <div class="masonry-item">
  <div class="masonry-item1">

    <a href="#" class="image">
      <div class="caption">
        <h3><img src="blah" /></h3> <!-- DARKEN THIS -->
      </div>
       <img src="blah" /> <!-- KEEP FULL OPACITY -->
     </a>
 </div>
 </div>

我的css:

  .masonry-container .masonry-item .image:hover .caption {
   opacity: 1;

  }

 .masonry-container .masonry-item a.image:hover img {
  opacity: .2; /* this seems to darken everything, but when removed darkening doesn't work */

 }

 .masonry-container .masonry-item1:hover {
   background-color: rgba(222,222,222,.5);
   z-index:98;
 }

这是我正在尝试做的一个例子： http://screencast.com/t/7qDUmCJMNd

Answer 1

您在寻找这样的东西吗？:

见JSFiddle

HTML:

<div class="masonry-item">
    <div class="masonry-item1">
        <div class="caption">
            <h3><img id="image1" src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" /></h3> <!-- DARKEN THIS -->
        </div>
        <img id="image2" src="http://laurafranksblog.files.wordpress.com/2013/04/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" /> <!-- KEEP FULL OPACITY -->
    </div>
</div>

CSS:

.masonry-item1 {
    background-color: #000;
    position: relative;
    height: 500px;
}
.masonry-item1:hover #image1 {
    opacity: .2;
    transition: all 1s;
}

/* This is just to get the images to overlap, you don't need this if you're doing it another way */
#image1, #image2 {
    position: absolute;
}

Answer 2

这是我的解决方案。虽然没有变暗，但我相信你可以把它作为@mikelt21的答案。

<div class="masonry-item">
    <img id="i1" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_07-01-128.png" />
    <img id="i2" src="https://cdn0.iconfinder.com/data/icons/business-and-finance-9/250/vector_265_20-01-128.png" />
</div>

<style>
img{
    position: absolute;
    top:0;
    left:0;
    transition: all 1s;
}
div:hover #i1{
    opacity:1;
}
div:hover #i2{
    opacity:0;
}
#i1{
    opacity:0;
}
#i1:hover{
    opacity:1;
}
</style>

Here is the example in action

悬停时使 div 中的图像变暗，但不是另一个子图像

Darken image in div on hover, but not another child image

css

hover