As a rule, width transformed from left to right. Are there any options to do the opposite? Type -100%.

Any ways other than changing the position of an element are welcome. CSS or JS , JQuery anyway.

2 answers 2

Option with float:right :

 .box { width: 100px; height: 100px; background: orangered; float:right; transition: width .3s ease-in-out; } .box:hover { width: 500px; } 
 <div class="wrap"> <div class="box"></div> </div>

Option with position:absolute :

 .wrap { position: relative; } .box { width: 100px; height: 100px; background: orangered; position: absolute; right: 0; transition: width .3s ease-in-out; } .box:hover { width: 500px; } 
 <div class="wrap"> <div class="box"></div> </div>

    In fact, it makes no difference, because the user will not notice how it changes. To achieve the desired, you just need to attach the object through the CSS right property to the right side:

     document.querySelector('.x').onclick = function(e) { this.style.width = '125px'; } 
     .container { position: relative } .x { position: absolute; right: 0; width: 200px; line-height: 36px; border: 2px solid #309; background: #94f; text-align: center; color: #fff; transition: width 1s ease-out; } 
     <div class="container"> <div class="x">Предмет</div> </div>

    To see in action, click on the purple rectangle.