Cross browser css transistion

Question

I am having a problem with given below code

This is my stylesheet

.h_w:hover img{
    -webkit-transform: scale(1.1); 
         -moz-transform: scale(1.1); 
          -ms-transform: scale(1.1);
           -o-transform: scale(1.1);
              transform: scale(1.1);
    -webkit-transition: 5s all;
       -moz-transition: 5s all;
         -o-transition: 5s all;
        -ms-transition: 5s all;
            transition: 5s all;
}
.h_w{ border-radius:200px;
       -moz-border-radius: 200px;
        -ms-border-radius: 200px;
         -o-border-radius: 200px;
    -webkit-border-radius: 200px;
    height: 287px;
    overflow: hidden;
    position: relative;
    width: 287px;
    background-color: #FFFFFF;
}    
.opacity-0.5{opacity:0.2;}
.circle_background{ 
    background:url(../images/circle-bg.png) no-repeat; 
    height:100%; 
    width:100%;
    position:absolute;
    font-size:15px;
    opacity:1 !important;
    top: 286px;
}    
.h_w:hover .circle_background{
            transition:1s all;
       -moz-transition:1s all;
        -ms-transition:1s all;
         -o-transition:1s all;
    -webkit-transition:1s all;
    top:0px;
    z-index:1000px;
}

And this is my HTML

<body style="background-color: #000000;">
    <div class="h_w">
        <span><img src="images/projects/circles/background.png" alt="flick the switch" /></span>
    </div>                
</body>

This code is working fine in Mozilla firefox but in chrome it is not working when zooming it is going outside the circle.

Any help will be appreciated.

Ya, would be great to get used pictures to see the excpected effect. — zessx, Dec 17 '13 at 08:34

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

Look here for your answer: --->X<---

PS: you must add -webkit-mask-image: -webkit-radial-gradient(circle, white, black); to your img's parent-div styles. Hope it helps.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 17 '13 at 08:37

DJmRek

378
6
13

score 0 · Answer 2 · answered Dec 17 '13 at 10:55

Use this code it will work .

  .h_w:hover  img{
         -webkit-transform: scale(1.1);
             -moz-transform: scale(1.1); 
              -ms-transform: scale(1.1);
               -o-transform: scale(1.1);
                  transform: scale(1.1);
        -webkit-transition: 5s img ;
           -moz-transition: 5s img ;
             -o-transition: 5s img ;
            -ms-transition: 5s img ;
                transition: 5s img ;
    }

here above you can see that .h_w:hover img rule uses transtion property. In transtion property I use img because You would like to create a motion on "img" not "all" property So use "img" instead of "all". Hope the answer!

Just click that this answer is useful! – Asraful Haque Dec 18 '13 at 09:16 — Asraful Haque, Dec 18 '13 at 09:16

Cross browser css transistion

This is my stylesheet

And this is my HTML

2 Answers2