淡化背景图像，然后在悬停时显示文本（不淡化）

Question

我有一张图片，在悬停时，我希望不透明度为.7，然后显示隐藏的文字。 我有它工作，但文本也淡出，因为它是褪色图像的孩子。

有没有办法解决这个问题，所以文字不会褪色？

需要考虑的是整个事情将在引导程序中，图像是从数据库以及文本动态加载的。

这是我迄今为止所做的工作（感谢研究本网站上的其他主题）。

HTML

<div class="portfolioImage" style="background-image: url('http://placekitten.com/200/150');">
    <div class="footerBar">A Sample Image</div>
</div>

CSS

.portfolioImage {
   width: 200px;
   height: 150px;
   position: relative;
   -webkit-transition: all 0.3s ease;
   -moz-transition:    all 0.3s ease;
   -o-transition:      all 0.3s ease;
   ms-transition:     all 0.3s ease;
   transition:         all 0.3s ease; 
   opacity: 1.0;
   z-index: 3;
}

.footerBar {    
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   display: none;
   text-align:center;
   color:#000;
}

的jQuery

$('.portfolioImage').hover(function(){                      
        $(this).css({"opacity":"0.7"});
        $('.footerBar').css('display','block');
        }, 
        function () {
            $(this).css({"opacity":"1.0"});
            $('.footerBar').css('display','none');
        }
    );

这是一个显示这个例子的小提琴 的 jsfiddle

任何帮助非常感谢

Answer 1

最简单的解决方案是不针对整个包含div，这就是为什么一切都降低了不透明度，所以我会将图像放在自己的div中，相应地定位它，然后简单地降低图像div上的不透明度，把所有其他东西“原样”留下：

Working fiddle demo here：http://jsfiddle.net/g8n0csca/1/

Javascript

$('.portfolioImage').hover(
   function() {
         $(this).find(".image_frame").addClass("lowerOpacity");
}, function(){
     $(this).find(".image_frame").removeClass("lowerOpacity");
});

HTML

<div class="portfolioImage">
    <div class="footerBar">A Sample Image</div>
    <div class="image_frame" style="background-image: url('http://placekitten.com/200/150');">
</div>

CSS

.portfolioImage {
    width: 200px;
    height: 150px;
    position: relative;
}

.footerBar {    
     position: absolute;
     padding-top:50%;
     overflow:hidden;
     width:100%;
     height:20%;
     color:#000;
     transform: translateY(-50%);
     text-align:center;
     z-index:1;
}

.image_frame {
    width:100%;
    height:100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition:    all 0.3s ease;
    -o-transition:      all 0.3s ease;
    ms-transition:      all 0.3s ease;
    transition:         all 0.3s ease; 
    position:absolute;
    z-index:2;
    opacity: 1.0;    
}

.lowerOpacity { opacity:0.7; }

Working fiddle demo here：http://jsfiddle.net/g8n0csca/1/

希望这有帮助。

Answer 2

你根本不需要JS。只需更改您的代码：

<div class="portfolio-item">
    <img src="blah-blah-blah" />
    <p>Some text</p>
</div>

和css这样的事情：

.portfolio-item {
    position: relative;
    width: 200px;
    height: 100px;
    overflow: hidden;
}
.portfolio-item > img {
    transition: all 0.2s ease;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}
.portfolio-item > p {
    transition: all 0.2s ease;
    opacity: 0;
}
.portfolio-item:hover > img {
    opacity: 0;
}
.portfolio-item:hover > p {
    opacity: 1;
}

这种方法的一个问题是，当投资组合项目块必须具有其大小的图像时，您无法使用它。

但如果不是，您甚至可以通过将顶部，右侧，底部和左侧更改为-999px并设置＆＃34; margin：auto＆＃34;来显示图像中心。您也可以（当然）设置图像最大宽度和/或最大高度。

Answer 3

<强> WORKING FIDDLE

有一个解决方法，只有它不是最好的，但它的工作原理！ 你必须在父母中创建另一个div，那就是图像。

<div class="portfolioImage">
        <div class="image" style="width: 100%; height: 100%; background-image: url('http://placekitten.com/200/150');"></div>
        <div class="footerBar">A Sample Image</div>
</div>

比文字不是图像的孩子，它不会再淡出。

Answer 4

使用rgb：

$('.portfolioImage').hover(function(){                      
            $(this).css({"rgb":"0,0,0,0.7"});
            $('.footerBar').css('display','block');
            }, 
            function () {
                $(this).css({"opacity":"1.0"});
                $('.footerBar').css('display','none');
            }
        );

有关详细信息，请参阅：Opacity of background-color, but not the text