透明图像上的CSS转换
我有三张图片（透明的pngs）
使用以下html / css
堆叠<div style="position: relative; left: 0; top: 0;">
<img src="img/main.png" style="position: absolute; top: 0; left: 0;" />
<img src="img/middle.png" style="position: absolute; top: 0; left: 0;"/>
<img src="img/center.png" style="position: absolute; top: 0; left: 0;"/>
</div>
得到这个：
我想在每张图片上添加悬停效果（放大，边框，不透明等）。
悬停时放大的普通CSS将是：
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
在这种情况下不起作用，因为悬停效果不仅应用于整个图像而不仅仅是图像部分（图像具有透明背景）。
我的问题是，是否可以使用不规则形状的CSS设置透明图像的样式？
jsfiddle here：http://jsfiddle.net/h4mxysw5/
修改：
似乎有一种混乱。我不想一次缩放所有三个图像。
例如 - 当悬停在中心图像上时，我只想缩放中心图像（不是全部）。
更新了带边框的jsfiddle：http://jsfiddle.net/h4mxysw5/4/
9 个答案:
答案 0 :(得分：25)
你必须做的两件事。
- 裁剪图像以仅适合他们所需的空间，而不是整个容器尺寸，因此它们不会相互重叠。
- 从
:hover移除div，并使用:hover选择器为每个图片添加img行为。
以下是示例：
div {
margin: 50px; /* Just for demo purposes */
}
img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}<div style="position: relative; left: 0; top: 0;">
<img class="one" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" />
<img class="two" src="http://i.imgur.com/iEwbExs.png" style="position: absolute; top: 76px; left: 72px;"/>
<img class="three" src="http://i.imgur.com/hdwFlUv.png" style="position: absolute; top: 102px; left: 100px;"/>
</div>
<强>更新
检查您可以使用SVG执行的操作：
path {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
transform-origin: center center;
}
path:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}<svg width="400px" height="400px">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M140.5,178 C161.210678,178 178,161.210678 178,140.5 C178,119.789322 161.210678,103 140.5,103 C119.789322,103 103,119.789322 103,140.5 C103,161.210678 119.789322,178 140.5,178 Z M141,158 C150.388841,158 158,150.388841 158,141 C158,131.611159 150.388841,124 141,124 C131.611159,124 124,131.611159 124,141 C124,150.388841 131.611159,158 141,158 Z" fill="#4BA1DF"></path>
<path d="M140,205 C175.898509,205 205,175.898509 205,140 C205,104.101491 175.898509,75 140,75 C104.101491,75 75,104.101491 75,140 C75,175.898509 104.101491,205 140,205 Z M140,189 C167.061953,189 189,167.061953 189,140 C189,112.938047 167.061953,91 140,91 C112.938047,91 91,112.938047 91,140 C91,167.061953 112.938047,189 140,189 Z" fill="#4BA1DF"></path>
<path d="M140,280 C217.319865,280 280,217.319865 280,140 C280,62.680135 217.319865,0 140,0 C62.680135,0 0,62.680135 0,140 C0,217.319865 62.680135,280 140,280 L140,280 Z M140.5,226 C187.720346,226 226,187.720346 226,140.5 C226,93.2796539 187.720346,55 140.5,55 C93.2796539,55 55,93.2796539 55,140.5 C55,187.720346 93.2796539,226 140.5,226 L140.5,226 Z" fill="#4BA1DF"></path>
</g>
</svg>
答案 1 :(得分：11)
这里的主要问题是你使用的所有图像都是相同的尺寸 - 所以因为它们彼此叠加，你只会悬停在顶部。仅仅因为图像是透明的，它仍会触发：当您将鼠标悬停在图像的任何部分上时将鼠标悬停。 为了演示使用您自己的CSS，您可以在没有图像的情况下进行演示：
div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:10px solid #f00;
border-radius:50%;
position: absolute;
}
.outer {
width:200px;
height:200px;
top: 25px;
left: 25px;
border:30px solid #f00;
}
.middle {
width:150px;
height:150px;
top: 60px;
left: 60px;
border:20px solid #f00;
}
.inner {
width:100px;
height:100px;
top: 95px;
left: 95px;
border:10px solid #f00;
}
div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}<div style="position: relative; left: 0; top: 0;">
<div class="outer"></div><div class="middle"></div><div class="inner"></div>
</div>
在这里，通过一些调整，你可以使用相同的CSS，但也可以使用图像作为“背景图像”，以达到你想要达到的效果。
div > div {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
border:1px solid #f00;
border-radius:50%;
position: absolute;
}
.outer {
width:280px;
height:280px;
top: 25px;
left: 25px;
background-image:url(http://i.stack.imgur.com/bFfbC.png);
}
.middle {
width:130px;
height:130px;
top: 100px;
left: 100px;
background-image:url(http://i.stack.imgur.com/Eewcq.png);
background-position:center;
}
.inner {
width:75px;
height:75px;
top: 125px;
left: 125px;
background-image:url(http://i.stack.imgur.com/VXk7A.png);
background-position:center;
}
div > div:hover {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}<div style="position: relative; left: 0; top: 0;">
<div class="outer"></div>
<div class="middle"></div>
<div class="inner"></div>
</div>
答案 2 :(得分：8)
出于纯粹的好奇，如果可以做到，我只需要创建仅限CSS 版本。虽然它没有将图像用作所需的OP，但我仍然认为，作为img和/或JS的替代，结果值得发布。
在代码段中，您将看到无阴影和阴影版本。请执行发表您的意见......
（顺便说一下：在FF DE 44+，W4上的Chrome 46+和IE11 +上测试过）
html, body { box-sizing: border-box;
height: 100%; width: 100%; background-color: #f9f7f1;
margin: 0px; padding: 0px; border: 0px;
cursor: default }
*, *:before,
*:after { box-sizing: inherit }
.donut-button { position: relative;
width: 280px;
height: 280px;
margin: 100px auto;
cursor: pointer }
.r-outer { width: 100%; height: 100%; border-width: 55px; top: 0.0%; left: 0.0% }
.r-middle { width: 50%; height: 50%; border-width: 15px; top: 25.0%; left: 25.0% }
.r-center { width: 25%; height: 25%; border-width: 20px; top: 37.5%; left: 37.5% }
.ring { position: absolute;
border-color : hsl(205, 69%, 58%);
border-style : solid;
border-radius: 50%;
transition: all 50ms }
.ring:hover { transform: scale(1.10) }
.ring:active { transform: scale(0.95) }
/* demo extras, shadow and color manipulation during hover */
[btn] { box-shadow: inset 0 0 1px hsla(205, 69%,48%, 1), /* hide white overflow (quirk) */
inset 10px 10px 10px hsla(205, 69%, 8%,.3), /* inset shadow */
0 0 1px hsla(205, 69%,58%, 1), /* hide white overflow (ditto) */
20px 20px 10px hsla(205, 69%, 8%,.4), /* inner outside shadow */
0 0 1px hsla(205, 69%, 8%,.3) } /* outer outside shadow */
[btn]:hover { border-color: hsl(205, 69%, 62%);
box-shadow: inset 10px 10px 10px hsla(205, 69%, 8%,.4),
20px 20px 10px hsla(205, 69%, 8%,.3) }
[btn]:active { border-color: hsl(205, 69%, 54%);
box-shadow: inset 8px 8px 8px hsla(205, 69%, 8%,.5),
10px 10px 10px hsla(205, 69%, 8%,.4) } <div id="donut-1" class="donut-button">
<div class="ring r-outer"></div>
<div class="ring r-middle"></div>
<div class="ring r-center"></div>
</div>
<div id="donut-2" class="donut-button">
<div btn class="ring r-outer"></div>
<div btn class="ring r-middle"></div>
<div btn class="ring r-center"></div>
</div>
答案 3 :(得分：6)
使用JavaScript，您可以按如下方式对悬停区域进行硬编码：
的JavaScript
function animateCircles(obj) {
var x = window.event.x - obj.offsetLeft;
var y = window.event.y - obj.offsetTop;
var img1 = document.getElementById('1');
var img2 = document.getElementById('2');
var img3 = document.getElementById('3');
var centerR = 45;
var middleR = 75;
if (x >= img3.offsetLeft + (img3.offsetWidth / 2 - centerR) &&
x <= img3.offsetLeft + (img3.offsetWidth / 2 + centerR) &&
y >= img3.offsetTop + (img3.offsetHeight / 2 - centerR) &&
y <= img3.offsetTop + (img3.offsetHeight / 2 + centerR))
img3.className += " onhover";
else
img3.className = "normal";
if (x >= img2.offsetLeft + (img2.offsetWidth / 2 - middleR) &&
x <= img2.offsetLeft + (img2.offsetWidth / 2 + middleR) &&
y >= img2.offsetTop + (img2.offsetHeight / 2 - middleR) &&
y <= img2.offsetTop + (img2.offsetHeight / 2 + middleR))
img2.className += " onhover";
else
img2.className = "normal";
if (x >= img1.offsetLeft &&
x <= img1.offsetLeft + img1.offsetWidth &&
y >= img1.offsetTop &&
y <= img1.offsetTop + img1.offsetHeight)
img1.className += " onhover";
else
img1.className = "normal";
}
使用变量centerR和middleR指定悬停'正方'的大小（应悬停的图像的中心）。请注意，您还可以改进此代码，以便在图像增长时放大悬停区域，这样当您将鼠标悬停在放大图像之外时，图像才会缩小。请注意，我故意对图像的所有宽度和高度进行软编码：如果您决定更改图片，这可以提供更大的灵活性。
使用以下HTML：
<div style="position: relative; left: 0; top: 0;">
<img id="1" src="http://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="2" src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
<img id="3" src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
</div>
和CSS：
.normal {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.onhover {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
这产生以下结果：
> DEMO
答案 4 :(得分：4)
尝试Pixel Selection：一个可以处理悬停透明度的JQuery库。
$(function() {
$('img').Pixelselect({
over: function(e, obj, hit) {
if (hit) {
obj.addClass('hover');
} else {
obj.removeClass('hover');
}
e.preventDefault();
},
out: function(e, obj) {
obj.removeClass('hover');
e.preventDefault();
},
sublayers: true
})
})img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
opacity: 1;
}
img.hover {
opacity: 0.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative; left: 0; top: 0;">
<img src="http://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" />
<img src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" />
<img src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" />
</div>
（由于悬停区域会发生变化，图片需要在同一个网域上，因此无法通过缩放图片来创建
答案 5 :(得分：3)
Demo
我使用z-index表示三个div，每个div都有background-image
-
/*second Circle*/Div1 = z-index：1 -
/*Middle Small Circle*/Div1 = z-index：2 -
z-indexDiv1 = z-index：3
z-index基本上用来叠加它，所以中圈位于顶部，第二个圆位于最大圆圈和中间小圆圈之间，最大圆圈终于不会影响鼠标悬停在其他圆圈上，因为所有圆圈都比它上面的圆圈大（在allImg中），因此它们是可见的并且可以悬空。 Div id /*Outer Div use for alignment and to set size*/
#allImg{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
top:100px;
}
/*Styling appling to all desendant div inside allImg*/
#allImg > div{
position:absolute;
padding: 0px;
-webkit-transition: all 1s ease;/* Safari and Chrome */
-moz-transition: all 1s ease;/* Firefox */
-o-transition: all 1s ease; /* IE 9 */
-ms-transition: all 1s ease;/* Opera */
transition: all 1s ease;
position: absolute;
padding: 0px;
transition: all 1s ease 0s;
border: 1px solid #000;
border-radius: 100px;
}
/*Div with smallest z-index i.e outer circle*/
#img1{
background-image: url('http://i.stack.imgur.com/GWShR.png');
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: 1;
}
#img1:hover{
-moz-transform: scale(1.25);/* Firefox */
-webkit-transform:scale(1.25); /* Safari and Chrome */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
/*Div with greater z-index then Outer circle i.e 2nd circle*/
#img2{
background-image: url("http://i.stack.imgur.com/eWisy.png");
background-size: 100% 100%;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index:2;
}
#img2:hover{
-moz-transform: scale(1.16);/* Firefox */
-webkit-transform:scale(1.16); /* Safari and Chrome */
-ms-transform:scale(1.16); /* IE 9 */
-o-transform:scale(1.16); /* Opera */
transform:scale(1.16);
}
/*Div with greatest z-index i.e middle circle*/
#img3{
background-image: url("http://i.stack.imgur.com/VjygS.png");
background-size: 100% 100%;
width: 30%;
height: 30%;
left: 35%;
top: 35%;
z-index:3;
}
#img3:hover{
-moz-transform: scale(1.13);/* Firefox */
-webkit-transform:scale(1.13); /* Safari and Chrome */
-ms-transform:scale(1.13); /* IE 9 */
-o-transform:scale(1.13); /* Opera */
transform:scale(1.13);
}用于设置对齐，大小，因为所有子div对allImg都有宽度，高度以百分比表示，它们会自动调整大小
<div id="allImg">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>echo (microtime(true) - $_SERVER['REQUEST_TIME']).'<br>';
另请注意您需要将图像裁剪为实际尺寸，如@Dave Gomez所述
答案 6 :(得分：1)
我认为你需要=＆gt; JSFiddle demo：）
div:hover > img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
答案 7 :(得分：1)
可能的一种解决方案可能是：
（使用The HTML map element）
var vi = function(el) {
var imgEl = document.getElementById(el.getAttribute('data-img'));
if(imgEl) imgEl.classList.add('effectOn');
}
var vo = function(el) {
var imgEl = document.getElementById(el.getAttribute('data-img'));
if(imgEl) imgEl.classList.remove('effectOn');
}img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
img.effectOn {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}<div style="position: relative; left: 0; top: 0;">
<img id='main' src="http://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" usemap='#main' />
<img id='middle' src="http://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
<img id='center' src="http://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
<map id="main">
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='center' coords="147,147,58" />
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='middle' coords="147,147,90" />
<area shape="circle" onmouseover='vi(this)' onmouseout='vo(this)' data-img='main' coords="147,147,147" />
</map>
</div>
你可以在任何一种形式上使用这种方式，矩形，三角形，多边形......
最困难的是划分地图，但有各种软件可以帮助你（GIMP那样做）。
答案 8 :(得分：0)
正如评论中所说，只有一个图像，另外2个只有html / css。 这里的小提琴，希望你需要的效果是这样:)）
https://jsfiddle.net/keypaul/8dr25184/
HTML
<div id="wrap">
<div></div>
<div></div>
<img src="http://i.stack.imgur.com/bFfbC.png" alt="" />
</div>
CSS
#wrap {
position:relative;
width:280px;
height:280px;
}
#wrap img{
position:relative;
max-width:100%;
height:auto;
top:0;
left:0;
z-index:1;
transform: scale(1);
transition: 0.4s;
}
#wrap img:hover {
transform:scale(1.25);
}
#wrap div:nth-child(1){
background: transparent;
border: 15px solid red;
border-radius: 100px;
height: 99px;
left: 75px;
overflow: hidden;
position: absolute;
top: 77px;
width: 99px;
z-index: 2;
transform: scale(1);
transition: 0.4s;
}
#wrap div:hover:nth-child(1){
transform: scale(1.5);
}
#wrap div:nth-child(2){
background: transparent;
border: 20px solid red;
border-radius: 40px;
height: 34px;
left: 103px;
overflow: hidden;
position: absolute;
top: 105px;
width: 34px;
z-index: 3;
transform: scale(1);
transition: 0.4s;
}
#wrap div:hover:nth-child(2){
transform: scale(1.5);
}
您只需要从大png中删除内部小圆圈，更改内部甜甜圈的颜色并在css中添加供应商前缀。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？