JSFiddle - React, Tailwind, and code Playground

by alaa13212

HTML

<div id="onhover">
    في hover
</div>
<div id="default">
    في الوضع العادي
</div>

CSS

body{
    direction:rtl;
    padding-top:4em;
}

#default{
    transition-property:transform, opacity, font-size, padding;
    transition-duration:.8s;
    -moztransition-property:-moz-transform, opacity, font-size, padding;
    -moztransition-duration:.8s;
    -webkit-transition-property:-webkit-transform, opacity, font-size, padding;
    -webkit-transition-duration:.8s;
    -o-transition-property:-o-transform, opacity, font-size, padding;
    -o-transition-duration:.8s;
}
#onhover:hover{
    transition-property:transform, opacity, font-size, padding;
    transition-duration:.8s;
    -moztransition-property:-moz-transform, opacity, font-size, padding;
    -moztransition-duration:.8s;
    -webkit-transition-property:-webkit-transform, opacity, font-size, padding;
    -webkit-transition-duration:.8s;
    -o-transition-property:-o-transform, opacity, font-size, padding;
    -o-transition-duration:.8s;
}


div{
    float:right;
    font-size:1.5em;
    margin-right:2em;
    padding:1em;
    width:6em;
    height:6em;
    border:1px solid #ccf;
    background:#ffc;
    opacity:.4;
}
div:hover{
    opacity:1;
    padding:0.1em;
    font-size:2em;
    transform:rotate(25deg);
    -ms-transform:rotate(25deg);
    -moz-transform:rotate(25deg);
    -webkit-transform:rotate(25deg);
    -o-transform:rotate(25deg);
}