Question

大家好！

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

从正常时开始： http://i.stack.imgur.com/QM0c0.png（在其他浏览器中复制并粘贴，我无法发布直接图片）

这就是当你将鼠标悬停在它上面时的样子，背景会变黑并且图像会弹出更大的尺寸： http://i.stack.imgur.com/dsvmu.png

任何人都知道如何做到这一点？

亲切的问候！

Answer 1

你需要制作2个div

'Div1小按钮'和 'Div2 Big Button'

然后你需要使用jQuery显示和隐藏它们。并且如下：如果悬停该按钮，则显示Div2 Big Button else hide。

Answer 2

这是你用纯CSS做的。最好的方法是使用:hover属性。

HTML：

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

CSS：

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

小提琴here。将鼠标悬停在图片上即可查看效果。

此外，如果您希望背景在图像中着色，请将图像包裹在div内。并使用以下css：

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

CSS：

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;
}

升级fiddle。

Answer 3

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

.banner img:hover {

   transform: scale(1.25);

 }

将悬停效果添加到图片中

3 个答案: