Увеличение изображения при наведении (в темах)

Собственно суть проблемы - в заголовке.
В результате поиска нашёл вот такую тему, но там html+css, в моё же случае, необходимо, чтобы изображения, вставленные в таблицу (ВВ-код), которой присвоен определённых класс, увеличивались при наведении курсора.
Возможно ли подобное осуществить?

автор **Dana Domirani** Ноябрь 5th 2013, 17:04

Самый простой вариант: поставить в пост таблицу с двумя изображениями

Код:: [table class="imgblock"][tr][td][img]http://i57.servimg.com/u/f57/13/71/53/06/image_10.png[/img][img]http://r14.imgfast.net/users/1411/36/80/17/avatars/1-9.jpg[/img][/td][/tr][/table]

Первое — это превью. Второе — полноразмерная картинка.

Обязательное условие: следить, чтобы между ними не было лишних пробелов и переходов на новую строку, в противном случае там пропишется лишний br и CSS перестанет работать.

Cобственно, CSS:

Код:: /* таблицы с увелич.изобр. */ .imgblock { padding: 5px; position:relative; border: 1px solid #666; } /* 100% изображение дефолтный стиль */ .imgblock img + img { position: absolute; display: none !important; padding: 0; margin: 6px; -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.55); -moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.55); box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.55); -webkit-transition: top 1s ease-out 0.5s; -moz-transition: top 1s ease-out 0.5s; -o-transition: top 1s ease-out 0.5s; transition: top 1s ease-out 0.5s; } /* 100% изображение при наведении */ .imgblock:hover img + img { display: block !important; top: 0; left: 0; z-index: 999; }

P.s. для корректной работы следует обнулить в ПА > Общие > Сообщения и E-mail — Конфигурация > значения для Автоматического изменение размера изображений

Dana Domirani, отличное решение, спасибо!)

Увеличение изображения при наведении (в темах)

Увеличение изображения при наведении (в темах)

Re: Увеличение изображения при наведении (в темах)

Re: Увеличение изображения при наведении (в темах)

Re: Увеличение изображения при наведении (в темах)