0

我正在尝试实现将鼠标悬停在图片上的效果，该图片会使背景变暗并在顶部显示文本。

例如，您可以访问此页面并向下滚动以查看第二组两张图片。当您将鼠标悬停在它们上时，它们会变暗并显示文本。

想到的一件事是用鼠标悬停改变图片，但这是一种矫枉过正。我希望通过 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;
}
4

3 回答 3

3

What I would do is

  • Have an absolutely positioned div on top of the image that has an opacity of 0 by default, with a dark background. This contains your text. You could also make it show/hide with display: none and display: block, but this way you wouldn't be able to add the fade in / fade out effect, as CSS transitions don't support the display property.
  • On hover, increase the opacity to almost 1.
  • Include a CSS transition for the opacity property to make it look like the background is fading in.

See http://jsfiddle.net/AEyW3/

于 2013-07-28T17:12:35.713 回答
2

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

DEMO http://jsfiddle.net/kevinPHPkevin/4Dfpm/360/

div:hover img {
    opacity: 0.7;
}
于 2013-07-28T17:10:15.093 回答
1

他们最有可能使用该opacity物业。所有图像的默认不透明度都是1，所以如果你降低它，比如说.5，它看起来会使图像变暗。

小提琴

于 2013-07-28T16:58:56.290 回答