鼠标通过CSS对图片的影响，改变背景和文本。

Question

我试图在图片上实现鼠标的效果，这会使图片的背景变得模糊，并在顶部带来一段文字。

例如，您可以访问这页面并向下滚动以查看第二组两幅图片。当你用鼠标轻敲它们时，它们会变得更暗，并且会弹出文字。

脑海中浮现的一件事是用鼠标移动改变画面，但这是过头了。我希望通过CSS实现它。

HTML

<div id="bottomWide">           
    <ul>
        <li>
            <img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt=""> 
                                <div>Some text here, style as needed</div>
        </li>
        <li>
            <img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="">
                                <div>Some text here, style as needed</div> 
        </li>

    </ul> 
</div>

CSS

#bottomWide{
    width:100%;
    margin:0 auto;


}

#bottomWide ul{
    margin:0;
    padding:0;
    /* For Mouse Over*/
    position: relative;
    display: inline-block;
}
#bottomWide li{
  list-style-type: none;
  display: inline-block;
    width:50%;
    text-align:justify;
    float: left;
}

#bottomWide img{
    width:100%;
}



#bottomWide li div{
    position: absolute;
    top: 0;
    left: 0;
    /* 100% will equal the dimensions of the image, as nothing else will be inside the .container */
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: #000;
    opacity: 0;
    /* This will create the fade effect */
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    /* Include all required vendor prefixes for opacity and transition */
}

#bottomWide li div:hover {
    opacity: 0.7;
}

Answer 1

我会做的是

• 在图像顶部有一个绝对定位的div，默认情况下它的不透明度为0，背景是暗的。这是你的短信。您也可以使用display: none和display: block来显示/隐藏它，但是这样您就无法添加淡入/淡出效果，因为CSS转换不支持显示属性。
• 在悬停时，将不透明度提高到接近1。
• 包含不透明属性的CSS转换，使其看起来像是背景正在消失。

请参阅http://jsfiddle.net/AEyW3/

Answer 2

您需要在css中创建不透明动画和文本显示值。

演示http://jsfiddle.net/kevinPHPkevin/4Dfpm/360/

div:hover img {
    opacity: 0.7;
}

Answer 3

它们很可能使用opacity属性。所有的图像都有默认的1不透明度，所以如果你减少它，比如说.5，它就会使图像变暗。

小提琴