使用单个元素，为特征图像使用伪元素（：before），并使用适当的悬停样式设置其不透明度并显示与基础第二幅图像的混合。我加入了一个渐进的图像转换，只是为了让它看起来更好一点。

html:

<div class="my-image-holder">
    text and other contents we don\'t want affected by opacity
</div>

css:

.my-image-holder {
    position: relative;
    z-index:1;
    width:200px;
    height:200px;
    margin:30px;
    background-image: url(\'//some-url-to-second-image\');
    background-size: contain;
    font-size: 1.2em;
    color: white;
}

.my-image-holder:before {
    z-index:-1;
    position:absolute;
    width:200px;
    height:200px;
    left:0;
    top:0;
    content: url(\'//some-url-to-featured-image\');
    opacity:1.0;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.my-image-holder:hover:before {
    opacity:0.5;
}

Example JSFiddle

如果您想在“悬停”时发生一些事情，可以使用一些CSS来实现。将某个名称的id（因为它们需要唯一，所以CSS只会影响具有该id的div）分配给图像标记，然后将此作为起点：https://www.w3schools.com/howto/howto_css_image_overlay.asp

您还可以使用一些JS来更改内容。但是CSS会起作用。以上链接将为您提供一些想法。

您可能也对这个问题感兴趣https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html , 这与您希望使用此代码执行的操作类似：

<div id="Library"></div>

#Library {
   background-image: url(\'LibraryTransparent.png\');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url(\'LibraryHoverTrans.png\');
}

可以将多个背景图像指定给同一个div。

#sample-div {
    background-image: url(/folder/image.jpg);
}
#sample-div:hover {
    background-image: url(/folder/image.jpg), url(/folder/image2.jpg);
}

谢谢大家！我真的想出来了，而且很简单。我刚刚添加了两个背景图像，并将背景混合模式从“正常”更改为“悬停时倍增”。