將懸停效果添加到圖片

-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

將懸停效果添加到圖片

回答

相關問題