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

Question

On hover, I'm trying to change the opacity of the main parent to darken the main image, but I want to show another image over it in full opacity. Here's what I tried, but it's not working.
<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>
my 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;
}
Here's an example of what I'm trying to do:
http://screencast.com/t/7qDUmCJMNd

Answer 1

Are you looking for something like this?:
See 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

Here is my solution. Although there is no darken, I believe you could make it as #mikelt21's answer.
<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