Перейти к содержанию
AleksandrEvroteh

Смена картинки с анимацией принаведении

Рекомендуемые сообщения

Мне понравилось как реализована смена картинки на подобных шаблонах

http://demopavothemes.com/oc3/pav_styleshop_demo4/

Я начал эксперементировать на своем сайте. В кодах я полный чайник, поэтому подсмотрел часть кода с указаного шаблона

    top: 0;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: auto;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }

И вставил в свой стандартный шаблон вот сюда:

}
.product-thumb .image a:hover {
	opacity: 0.8;
}

Вместо opacity: 0.8;

Но получилось что картинка исчезала при наведении и все. Я понимаю что это не для моего ума, поэтому прошу помощи спецов. 

Как бы реализовать красивую смену картинки товара при наведении? Может плагин за умеренную плату, может совет бесплатный как код подправить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Через css вам это не реализовать, вам же нужно дополнительное изображение подтягивать при наведении

Тут почитайте

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 години назад, zlatoff сказав:

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

Я уже понял про :hover, но это не помогло. 

8 годин назад, greendragon сказав:

Через css вам это не реализовать, вам же нужно дополнительное изображение подтягивать при наведении

Тут почитайте

Дополнительное оно есть но от не знания оно не подтягивается.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Это слишком сложно и я ничего не понял. Может есть модуль?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.