圖像中的懸停效果
[英]Hover effect in the image
5 個解決方案
解決方案1
2 2017-04-18 13:04:19
如果您有兩個圖像，為什么不懸停替換。 鄧諾（Dunno），如果那才是您的意思。
.my-class:hover {
background-image: url('assets/images/img-2.png');
}
當您將鼠標懸停在上面時，將用您想要的圖像替換該圖像。
解決方案2
1 已采納 2017-04-18 13:12:03
您要創建一個類來控制要添加的hover效果。 這是在CSS ：
.classname:hover{
/*css stuff here*/
}
推薦的方法是在用戶將鼠標懸停在您的圖像上之后，獲得不同的圖像，如下所示：
.classname:hover{
background-image: url('path to your image');
}
如果要向圖像添加輪廓，則可以使用drop-shadow ，這是一種快速修復方法，但我不建議這樣做，例如：
.classname:hover{
-webkit-filter: drop-shadow(1px 1px 0 yellow)
drop-shadow(-1px -1px 0 yellow);
filter: drop-shadow(1px 1px 0 yellow)
drop-shadow(-1px -1px 0 yellow);
}
解決方案3
0 2017-04-18 13:09:17
假設您有以下html文件：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://combiboilersleeds.com/images/image/image-0.jpg" alt="" class="image" style="width:100%">
<div class="middle">
<div class="text">WOW Hover Effect</div>
</div>
</div>
</body>
</html>
解決方案4
0 2017-04-18 13:21:28
這篇文章回答了如何為自定義形狀圖像制作陰影，基於此您應該能夠弄清楚如何制作黃色陰影。 在CSS中為PNG圖像添加陰影
解決方案5
0 2017-04-18 13:28:41
這是您可以執行的示例（只需更改指向圖像區域的鏈接，它應該可以工作。
HTML
<a href="#top"><img class="popup1 img-1" src="https://i.stack.imgur.com/G9Sd7.png" />
</a>
CSS
.popup1:hover {
background-image: url(https://i.stack.imgur.com/D4EzQ.png)
}
懸停圖像時的懸停效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.