javascript - 透明图像上的CSS过渡

我有三张图片(透明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更新:http://jsfiddle.net/h4mxysw5/4/

最佳答案

您必须做两件事。

裁剪图像以使其仅适合它们所需的空间，而不适合整个容器的大小，因此它们不会相互重叠。

从: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>

关于javascript - 透明图像上的CSS过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33516444/