CODEWITHSUNDEEP
htmlcss
hmahdavi
hmahdavi

Reputation: 2352

Change two attribute of html element with animation by css3

I want top and box-shadow attributes execute with animation .I wrote this codes but only box-shadow run with animation.I want my animation executed such as this. How to fix this?

    .popup {
        -webkit-transition: 1s;
        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
    }

    .popup:hover {
            top: -10px;
            -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
            -ms-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
        }

Upvotes: 0

Views: 33

Answers (1)

Fahmi B.
Fahmi B.

Reputation: 798

can you give us the initial value of 'top' ?

if you use a framework like boostrap, semantic-ui, add (!important)

top: -10px important;

Upvotes: 1

Related Questions