html - 使用 css/html 的鼠标悬停(黑色+按钮+放大)

Question

我是 html/css 的新手，但我需要帮助。

我想在图像上创建一个鼠标悬停，图像应该更暗，例如:一个不透明度为 20% 的黑色正方形，应该有按钮“更多信息”+ 图片应该放大:

我已经尝试放大，但如果我将鼠标移到图像上，我的页脚每次都会移动。但我的页脚应该是固定的。像这样:

fiddle :https://jsfiddle.net/om0bhvwy/

我希望有人能帮助我。 :)

enter code heref

Answer 1

我在 w3 学校找到了这个例子。您甚至可以在在线编辑器中使用它。它会淡化它，但不会使其变暗。

http://www.w3schools.com/css/css_image_transparency.asp

<style>
    img {
        opacity: 0.4;
        filter: alpha(opacity=40); /* For IE8 and earlier */
    }

    img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
</style>