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

Hover эффект для Рекомендуемых и Товаров

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

Добрый день , подскажите как сделать ховер эффект на картинку в рекомендуемых и товарах ?

 

 

 

Безымянный.png

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


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

AlexeyAnokhin, в стилях прописать .product-thumb .image img:hover {box-shadow: 0 1px 8px rgba(0,0,0,.3);} для примера

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


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

смотря какой эффект нужен. например такой

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


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

AlexeyAnokhin, в стилях прописать .product-thumb .image img:hover {box-shadow: 0 1px 8px rgba(0,0,0,.3);} для примера

Благодарю , подскажите как убрать промежутки у некоторых позиций белые по краям ? 

Размер картинки менять пробовал...

 

Безымянный.png

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


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

AlexeyAnokhin, вам тогда лучше добавить вот такие строки, получше будет: 

.product-thumb .image img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }
 
.product-thumb .image img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

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


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

Может еще подскажет кто , как сделать ховером картинку другую

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


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

AlexeyAnokhin, вам тогда лучше добавить вот такие строки, получше будет: 

.product-thumb .image img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }
 
.product-thumb .image img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

Благодарю , да это уже получше... но не работает transition плавность

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


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

AlexeyAnokhin, вам тогда лучше добавить вот такие строки, получше будет: 

.product-thumb .image img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }
 
.product-thumb .image img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

Благодарю , да это уже получше... но не работает transition плавность

Все решил , image надо было поставить без img

Может как цвета добавить , типа затеменения легкого,  посоветуете ? 

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


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

не работает transition плавность

Вы в чем смотрите? У меня все работает:huh:

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


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

Может как цвета добавить , типа затеменения легкого,  посоветуете ? 

Блин даже незнаю, много всяких свойств есть, можете добавить для свойства hover - opacity: 0.8; или еще что нибудь. Гуглите.

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


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

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

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

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

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

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

Войти

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

Войти

  • Похожий контент

    • От vbond2603
      500.00 руб
      Скачать/Купить дополнение


      Дополнительное фото товара в каталоге при наведении
      При наведении на фото товара в каталоге и в стандартных модулях главная фотография меняется на первое дополнительное изображения товара. Модуль сделан в виде модификатора (ocmod).
      ===
      Описание:
      При наведении на фото товара в каталоге (category,special,search,manufacturer_info) и стандартных модулях (latest,special,featured,bestseller,product_tab,popular,ajax_viewed) главная фотография меняется на первое дополнительное изображения товара.
      ===
      При наличии этой функции очень упрощается выбор товаров в интернет-магазине. Это незаменимая вещь для упрощения поиска товаров. У многих крупных магазинов эта функция присутствует.
       
      Пример работы:
      http://hardcandy.top
       
      Модуль реализован для 2.0-3 версий.

      Модуль гарантировано будет работать на стандартном шаблоне.
      Также Бесплатный допил под нестандартные темы в случае покупки модуля и некорректной работы.

      Тех поддержка присутствует.
       
      Установка:
      1. Перейдите в раздел установки расширений
      2. Установите ocmod расширение
      3. Обновите модификаторы.
      Добавил vbond2603 Добавлено 25.12.2017 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1  
    • От vbond2603
      При наведении на фото товара в каталоге и в стандартных модулях главная фотография меняется на первое дополнительное изображения товара. Модуль сделан в виде модификатора (ocmod).
      ===
      Описание:
      При наведении на фото товара в каталоге (category,special,search,manufacturer_info) и стандартных модулях (latest,special,featured,bestseller,product_tab,popular,ajax_viewed) главная фотография меняется на первое дополнительное изображения товара.
      ===
      При наличии этой функции очень упрощается выбор товаров в интернет-магазине. Это незаменимая вещь для упрощения поиска товаров. У многих крупных магазинов эта функция присутствует.
       
      Пример работы:
      http://hardcandy.top
       
      Модуль реализован для 2.0-3 версий.

      Модуль гарантировано будет работать на стандартном шаблоне.
      Также Бесплатный допил под нестандартные темы в случае покупки модуля и некорректной работы.

      Тех поддержка присутствует.
       
      Установка:
      1. Перейдите в раздел установки расширений
      2. Установите ocmod расширение
      3. Обновите модификаторы.
    • От activik
      Всем привет друзья! Нужна помощь с редактированием стиля эффекта при наведении курсора.
       
      Нашел на форуме стиль:
      .box-product > div {     display: inline-block;     margin-bottom: 20px;     margin-left: 10px;     margin-right: 4px;     vertical-align: top;     width: 237px; }   .box-product > div:hover {     box-shadow: 0 0 10px #59E817; } Никак не могу его совместить с тегом thumbnail который придает рамку меню. Хотелось бы как на фото с правой стороны рамочку и при наведении эта рамочка подсвечивалась и хочется,чтобы при наведении по  мимо светящейся рамки,чтобы картинка чуть светлее становилась(или  чуть прозрачнее). Пример демо сайта:
       
       
      Заранее спасибо всем.

    • От newfag
      Здравствуйте сообщники!
      Подскажите как сделать чтобы заполнение (padding) в списке категорий, в режиме наведения (hover) , было одинаковым для каждой строки. А то получается сделать только относительно размеров названия категории, вот так:
      http://smotr.im/8iEH
      http://smotr.im/8iEI
      А хотелось бы, чтобы было вот так:
      http://smotr.im/8iF3
      http://smotr.im/8iF4
      добавил я такой вот кусок:
      .box-category > ul > li:hover > a {
      background: #edf6f9;
      font-size: 15px;
      color: #000000;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -khtml-border-radius: 5px;
      border-radius: 3px 3px 0px 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding: 6px 0px 6px 18px;
      }
  • Последние посетители   0 пользователей онлайн

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

×

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

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