Кроссбраузерный переход css

Question

Кроссбраузерный переход css

0

У меня проблема с приведенным ниже кодом

Это моя таблица стилей

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

И это мой 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>

Этот код отлично работает в Mozilla firefox, но в chrome он не работает при масштабировании, он выходит за пределы круга.

Любая помощь будет оценена.

Vikas Sharma 17 дек. 2013, в 09:52

Источник

0

Не могли бы вы поиграть на скрипке?
Igle 17 дек. 2013, в 08:25
0

Я, было бы здорово, чтобы привыкнуть картинки, чтобы увидеть ожидаемый эффект.
zessx 17 дек. 2013, в 08:34

Теги:

html

css

css3

2 ответа

0

Используйте этот код, он будет работать.

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

здесь вы можете увидеть, что.h_w: правило hover img использует свойство transtion. В свойствах transtion я использую img, потому что вы хотели бы создать движение на "img" не "все". Поэтому используйте "img" вместо "all". Надеюсь, ответ!

Asraful Haque 17 дек. 2013, в 08:24

0

@Asaraul Спасибо за вашу помощь, это сработало :)
Vikas Sharma 18 дек. 2013, в 07:28
0

Просто нажмите, что этот ответ полезен!
Asraful Haque 18 дек. 2013, в 09:16

Ещё вопросы

Не могли бы вы поиграть на скрипке?
Я, было бы здорово, чтобы привыкнуть картинки, чтобы увидеть ожидаемый эффект.
@Asaraul Спасибо за вашу помощь, это сработало :)
Просто нажмите, что этот ответ полезен!

DJmRek · Accepted Answer · 2013-12-17T06-30-00.000Z

Найдите здесь свой ответ: ---> X <---

PS: вы должны добавить -webkit-mask-image: -webkit-radial-gradient(circle, white, black); к вашим стилям parent-div img. Надеюсь, поможет.

Спасибо DJMREK ВАШЕ решение тоже сработало :)
Вы бы отметили это как ответ тогда? ^^