将悬停效果添加到图片

-2

大家好！将悬停效果添加到图片

我正在为自己设计一个网站，我正在制作这个恶心的首页，但我需要知道如何使它工作。

从这个时候这是正常的： http://i.stack.imgur.com/QM0c0.png（复制并在不同的浏览器中粘贴，我不能发表直接图像）

，这将是，当你将鼠标悬停在它，它会怎么看，背景会消失黑色和图像会弹出一个更大的尺寸： http://i.stack.imgur.com/dsvmu.png

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

亲切的问候！

来源

2015-05-23 St3fanNL

您将需要2周的div

“Div1构成小按钮”和 “Div2的大按钮”

然后你需要让他们展示和使用jQuery隐藏。并使它像：如果悬停该按钮，然后显示Div2大按钮，否则隐藏。

来源

2015-05-23 06:25:56 DesignStudios

这就是你如何用纯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; 
}

Upadated fiddle。

来源

2015-05-23 06:30:29 Zee

令人惊讶的是，它可以褪色，所以它看起来很整洁？ – St3fanNL

像[this]（http://jsfiddle.net/4r2s0eto/4/）？ – Zee

是的，但也许快一点？ – St3fanNL

我会建议使用transform css属性来调整用户悬停在其上的同一图像的大小。

.banner img:hover { 

    transform: scale(1.25); 

}

来源

2015-05-23 06:42:49 user3136884

将悬停效果添加到图片

回答

相关问题