CSS transition on transparent images

Question

I have three images (transparent pngs)

which are stacked using following 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>

to get this:

I want to add hover effect on each of these images(zoom in, border, opacity etc).

A normal CSS for a zoom in on hover would be:

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);
}

which doesn't work in this case because the hover effect gets applied to the whole image not just the image part (images have transparent background).

My question is, is it possible to style transparent images with CSS that are of irregular shapes?

jsfiddle here: http://jsfiddle.net/h4mxysw5/

Edit:

There seems to be a confusion. I do not want to zoom all three images at once.

For example - when hovered over the center image, I want just the center image to zoom (not all).

Updated jsfiddle with border: http://jsfiddle.net/h4mxysw5/4/

Answer 1

Two things you have to do.

• Crop you images to fit only the space need by them, not the whole container size so they don't overlap each other.
• Remove the :hover from the div and add a :hover behaviour to each image by using the img selector.

Here's the example:

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>

Update

Check what you can do with SVGs:

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>

Answer 2

The main issue here is that all of the images you have used are the same size - So because they are sitting on top of each other, you will only ever be hovering over the top one. Just because the image is transparent it will still trigger :hover when you hover over any part of the image. To demonstrate using your own CSS, this is how you could do it without images:

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>

And here, with a bit of tweaking you can use the same CSS but also using the images as "background-images" to give the effect you are trying to achieve.

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>

Answer 3

Out of sheer curiosity if it could be done I just needed to create a CSS only version. While it doesn't use the images as the OP required, I still think, as an alternative to img and/or JS, the result is worth posting.

In the snippet you will see both an unshaded and shaded version. Please do give your comments...

(btw: tested in FF DE 44+, Chrome 46+ and IE11+ on W7)

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>