Javascript 为图片添加悬停效果

大家好

我正在为自己设计一个网站，我正在制作这个病态的头版，但我需要知道如何让它工作

在正常情况下，从这一点： （复制并粘贴到其他浏览器中，我无法发布直接图像）

当你将鼠标悬停在它上面时，背景会变成黑色，图像会以更大的尺寸弹出：

有人知道怎么做吗

---

亲切的问候

您需要进行两次div

“Div1小按钮”和 “Div2大按钮”

然后需要使用jQuery使它们显示和隐藏。

---

将其设置为：如果悬停该按钮，则显示Div2大按钮，否则隐藏。

这是使用纯CSS的方式。最好的方法是使用

：hover

属性

HTML:

小提琴。将鼠标悬停在图像上以查看效果

此外，如果希望背景颜色与图像中的颜色相同，则将图像包装在

div

中。并使用以下css：

 <div><img src="http://i.stack.imgur.com/dsvmu.png"/></div>

---

升级。

我建议在用户将鼠标悬停在同一图像上时，使用transform css属性调整其大小

.banner img:hover {

   transform: scale(1.25);

 }

---

令人惊奇的是，有没有办法让它看起来很整洁？类似于？是的，但可能快一点？@st3fanl过渡的第二个字段是持续时间，现在是1秒。将其更改为

500ms

或任何您想要的，好吧，我试过了，但它不是我真正想要的。我在寻找一种模式效果，混合背景并用另一个（更大，更少蓝色）替换图像

 <div><img src="http://i.stack.imgur.com/dsvmu.png"/></div>

div {  
    pointer-events: none;
}

img {
    pointer-events: auto;
}

div:hover {
    background: rgba(0,0,0,0.3);
}
img{
    height:200px; 
    width:200px;
}
img:hover{
    width:400px; /*OR transform: scale(1.5)*/
    box-shadow: 10px 10px 5px #888888;
}

.banner img:hover {

   transform: scale(1.25);

 }