Плавное увеличение блока при наведении на определённую область в блоке?

Question

[Александр]

Здравствуйте.
Я новичок в этом деле, столкнулся с такой проблемой.
Хочу сделать плавное увеличение блока при наведении курсора на определённую область в этом блоке. Мучаюсь тут
Требуется чтобы при наведении на лупу, а не на любое место в блоке (блок 2) он расширялся по размерам как блок 3, то есть появлялся дополнительный текст, но не раздвигал остальные блоки, а на месте как блок 4. То есть Сделать плавное расширение как у блока 4, но при наведении только на лупу и чтобы он при этом не увеличивал содержимое а просто становился больше и появлялся доп текст.
Надеюсь объяснил что хотел.
Заранее спасибо за помощь.

Answer 1

[Сергей delphinpro]

если у блоков фиксированные размеры, то можно так jsfiddle.net/DelphinPRO/qsw81eya

Comments

[Александр]

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

[Сергей delphinpro]

Александр: jsfiddle.net/DelphinPRO/qsw81eya/1

[Александр]

Сергей: Спасибо большое! Теперь точно всё то что мне нужно, с остальными мелкими настройками уже сам разберусь.