Cross browser css transistion

Estoy teniendo un problema con el código dado a continuación

Esta es mi hoja de estilo

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

Y este es mi HTML

<body style="background-color: #000000;">
    <div class="h_w">
        flick the switch
    </div>                
</body>

Este código funciona bien en Mozilla Firefox, pero en Chrome no funciona cuando el zoom va fuera del círculo.

Cualquier ayuda será apreciada.

0
¿Te importaría hacer un violín?
agregado el autor Igle, fuente
Ya, sería genial obtener imágenes usadas para ver el efecto esperado.
agregado el autor zessx, fuente

2 Respuestas

Use este código, funcionará.

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

aquí arriba puede ver que la regla .h_w: hover img usa la propiedad de transición. En la propiedad de transición, utilizo img porque desea crear un movimiento en la propiedad "img", no "todos". Entonces usa "img" en lugar de "todo". Espero la respuesta!

0
agregado
¡Simplemente haz clic para que esta respuesta sea útil!
agregado el autor Asraful Haque, fuente
@Asaraul Gracias por tu ayuda, funcionó :)
agregado el autor Vikas Sharma, fuente

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

PD: debe agregar webkit-máscara de imagen: gradiente radial-webkit (círculo, blanco, negro); para estilos de padres y de su div img. Espero eso ayude.

0
agregado
Gracias DJMREK Tu solución también funcionó :)
agregado el autor Vikas Sharma, fuente
¿Lo marcarías como respuesta entonces? ^^
agregado el autor DJmRek, fuente