jquery 透明图像上的CSS过渡

webghufk 于 2023-10-17 发布在 jQuery

关注(0)|答案(9)|浏览(114)

我有三个图像（透明PNG）

这是堆叠使用以下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：http://jsfiddle.net/h4mxysw5/

编辑：

好像有点混乱。我不想一次缩放所有三个图像。
例如-当悬停在中心图像，我想只是中心图像缩放（而不是所有）。
更新jsfiddle with border：http://jsfiddle.net/h4mxysw5/4/

jquery

来源：https://stackoverflow.com/questions/33516444/css-transition-on-transparent-images

9条答案

按热度按时间

n53p2ov01#

我想你需要=> 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);
}

赞(0）回复(0）举报 2023-10-17

r6vfmomb2#

一种可能的解决办法是：
（使用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="https://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" usemap='#main' />
  <img id='middle' src="https://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" usemap='#main'/>
  <img id='center' src="https://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>

你可以用这种方式在任何类型的形式，矩形，三角形，多边形.
最困难的是划定Map，但有各种软件可以帮助您（GIMP）。

赞(0）回复(0）举报 2023-10-17

3j86kqsm3#

正如评论中所说，只有一个图像和其他2只与html/css。这里的小提琴，希望你需要的效果是这样的：）
https://jsfiddle.net/keypaul/8dr25184/
HTML

<div id="wrap">
    <div></div>
    <div></div>
    <img src="https://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中添加供应商前缀。

赞(0）回复(0）举报 2023-10-17

hsvhsicv4#

你必须做两件事。

裁剪您的图像，以适应他们所需要的空间，而不是整个容器的大小，所以他们不会相互重叠。
从div中删除:hover，并使用img选择器为每个图像添加:hover行为。
以下是示例：*

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="https://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>

赞(0）回复(0）举报 2023-10-17

0aydgbwb5#

这里的主要问题是，你使用的所有图像都是相同的大小-所以，因为它们是坐在对方的顶部，你将永远只会徘徊在顶部的一个。仅仅因为图像是透明的，当你悬停在图像的任何部分时，它仍然会触发：hover。为了演示如何使用你自己的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(https://i.stack.imgur.com/bFfbC.png);
}
.middle {
    width:130px;
    height:130px;
        top: 100px; 
    left: 100px;
    background-image:url(https://i.stack.imgur.com/Eewcq.png);
    background-position:center;
}
.inner {
    width:75px;
    height:75px;
    top: 125px; 
    left: 125px;
    background-image:url(https://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>

赞(0）回复(0）举报 2023-10-17

am46iovg6#

出于纯粹的好奇心，如果可以做到这一点，我只需要创建一个CSS只版本。虽然它没有使用OP所需的图像，但我仍然认为，作为img和/或JS的替代方案，结果值得发布。
在代码片段中，您将看到未着色和着色的版本。请做给给予您的意见.
(btw：在W7上的FF DE 44+、Chrome 46+和IE 11+中测试）

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>

赞(0）回复(0）举报 2023-10-17

e7arh2l67#

使用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="https://i.stack.imgur.com/bFfbC.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
    <img id="2" src="https://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" onmousemove="animateCircles(this)" />
    <img id="3" src="https://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

赞(0）回复(0）举报 2023-10-17

6qfn3psc8#

尝试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="https://i.stack.imgur.com/80Jxj.png" style="position: absolute; top: 0; left: 0;" />
  <img src="https://i.stack.imgur.com/Eewcq.png" style="position: absolute; top: 0; left: 0;" />
  <img src="https://i.stack.imgur.com/VXk7A.png" style="position: absolute; top: 0; left: 0;" />
</div>

(This不会工作创建与缩放图像，因为悬停区域将改变，也需要在同一域的图像）

赞(0）回复(0）举报 2023-10-17

np8igboo9#

Demo
我已经为三个div使用了z-index，每个div都有background-image

/*Largest Circle*/ Div 1 = z索引：1
/*second Circle*/ Div 1 = z索引：2
/*Middle Small Circle*/ Div 1 = z索引：3

z-index基本上是用来堆叠它，所以中间的圆在顶部，第二个圆在最大的圆和中间的小圆之间，最大的圆是最后这不会影响鼠标悬停在其他圆上，因为所有的圆都比它上面的圆大（在z-index中），所以它们是可见和可悬停的。Div id allImg用于设置align，size，因为allImg的所有子div都有宽度，高度百分比，它们将自动调整大小

/*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('https://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("https://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("https://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 id="allImg">
  <div id="img1"></div>
  <div id="img2"></div>
  <div id="img3"></div>
</div>

还请注意，您需要将图像裁剪为实际大小，如@Dave Gomez所说

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 透明图像上的CSS过渡

9条答案

JavaScript

> DEMO

相关问题

热门标签

最新问答