Joomla 4. Компонент K2 и форк K2ForJ4 (18 янв 2024)

Если вас, как и меня, достало выслушивать (вычитывать) бесконечные обещания разработчика K2 опубликовать версию компонента K2 под Joomla 4 (без чего невозможно реализовать апгрейд from Joomla 3 to Joomla 4) - воспользуйтесь форком K2ForJ4. Который в данный момент установлен и без каких-либо проблем работает на этом веб-сайте.

Подробнее...

Пример масштабирования для события :hover

ralf
Автор темы
Не в сети
Завсегдатай

Больше

12 года 10 мес. назад #1 от ralf

ralf создал тему: Пример масштабирования для события :hover

Интересный пример масштабирования для события :hover

При наведении курсора мыши картинка постепенно увеличивается в размерах, убрали курсор - возвращается к первоначальному размеру.

Посмотреть демо

Как такое реализовано? Используется набор изображений размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 300х100 px и расширяются при наведении курсора мыши. Используется центрирование по горизонтали, и изображение с новым размером может все испортить, поэтому применяется отрицательное значение поля, которое равное половине ширины.

Code:

#container {
width: 300px;
margin: 0 auto;
}
#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}​

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Работает на Kunena форум