css - 悬停时 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;
}