Переход от края коробки

Question

Я хочу создать коробку (div), в которой заполнение увеличивается при зависании. На самом деле это полноэкранная кнопка.

Я пробовал:

.full_screen { 
width:20px; 
height:20px; 
background-color:rgba(0,0,0,0.8); 
border-radius:2px; 
position:absolute; 
transition:all 0.6s; //important property 
left:82%; 
} 

.full_screen:hover { 
padding-top:10px; //!important property 
padding-right:10px; //important property 
} 

Я сделал увеличение отступ сверху и справа, но это не сработало.

Answer 1

От https://developer.mozilla.org/en-US/docs/Web/CSS/left:

Для абсолютно позиционируемых элементов (те, с позицией: абсолютными или позиция: фиксированный), она [left свойства] определяет расстояние между левым маржинального краем элемента и левым краем его содержащего блока.

left:82%; 

CSS интерпретирует это как «держать левый край этой рамки 82% от левого края содержащего блока.» Таким образом, левый край остается на месте, когда размер изменяется из-за заполнения.

Demo, using the code in the question

Что ты хотел, чтобы правый край на месте. Для этого вы можете указать right в своем CSS вместо left.

right:18%; 

Demo with the above property