Возможно ли это в CSS: height: height + 50px?

Question

Мне нужно увеличить height (то есть не определено a priori) от +50px на :hover.

.foo{ 
 
    background: red; 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 
.foo:hover{ 
 
    height: height+50px; 
 
    color: white; 
 
}

<div class="foo">foo text</div>

• Можно только css?
• Возможно ли использование less?

PS.

Практических (более сложный) нужно: у меня есть «спрайты» изображение

1234 
HHHH 
5678 
HHHH 

где Н представляет собой парение изображения для соответствующего исходного изображения.

я могу вычислить X и Y координат для каждого класса (1,2,3), но для :hover я хотел бы просто спуститься с ImageHeight:

:hover {background-position-y: background-position-y - @imgheight} 

Answer 1

Следуя моему замечанию: советую другой подход. Просто установите бокс-тень к элементу контейнера, например, так:

a { 
 
    text-indent: -9999px; 
 
    overflow: hidden; 
 
    background: url('http://nationalevents.cityofhope.org/images/content/pagebuilder/facebook-icon.png'); 
 
    background-size: cover; 
 
    width: 32px; 
 
    height: 32px; 
 
    display: block; 
 
    /*border: 1px solid white;*/ 
 
    box-sizing: border-box; 
 
    border-radius: 50%; 
 
} 
 
a:hover { 
 
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); 
 
}

<a href="#">Some text</a>

Обратите внимание, что коробка-проклейки и границы радиуса устанавливаются на, а не при наведении курсора мыши. Это делается для предотвращения любого дополнительного времени обработки при зависании. Лучше всего сохранять изменения при наведении минимальным.

Answer 2

Если у вас есть переменная высота как это:

@foo-height : 50px; /* here goes your initial height value */ 

вы можете написать эти правила в файле .less:

.foo { 
    background: red; 
    width: 50%; 
    height: @foo-height; 
    text-align: center; 
} 
.foo:hover { 
    height: ~'calc(@{foo-height} + 50px)'; 
    color: white; 
} 

Answer 3

Может быть, вы могли бы рассмотреть возможность использования псевдо-элементов:

http://jsfiddle.net/pjr7wbhk/2/

.foo{ 
    background: red; 
    width: 50%; 
    text-align: center; 
} 

.foo:hover{ 
    color: white; 
} 

.foo:hover::after { 
    content: ''; 
    display: block; 
    height: 50px; 
} 

Answer 4

Использование дополнительного элемента HTML и некоторые ABS/отн позиционирование:

http://jsfiddle.net/pjr7wbhk/6/

<div class="foo"> 
    <div class="inner-helper">foo text</div> 
</div> 

CSS:

.foo { 
    position: relative; 
} 
.foo .inner-helper { 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left:0; 
    right: 0; 
} 
.foo:hover .inner-helper { 
    bottom: -50px; 
}