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

тень при наведении на подкатегории сделать тень

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

не знаю в тот ли раздел пишу 

но может кто подскажет как сделать тень при наведении мыши на подкатегории 

при наведении на товар сделал пробовал тот же код поставить на категории в css но соответственно результата ноль 

 

может кто подскажет как сделать?

 

при наведении на товар тень на скрине как сделать такое же на категориях?

post-714810-0-16126500-1476731822_thumb.png

Изменено пользователем todi16mbcom

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


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

не знаю в тот ли раздел пишу 

но может кто подскажет как сделать тень при наведении мыши на подкатегории 

при наведении на товар сделал пробовал тот же код поставить на категории в css но соответственно результата ноль 

 

может кто подскажет как сделать?

 

при наведении на товар тень на скрине как сделать такое же на категориях?

-webkit-box-shadow: 0 0 25px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 25px rgba(0,0,0,.1);
 box-shadow: 0 0 25px rgba(0,0,0,.1);
-o-box-shadow: 0 0 25px rgba(0,0,0,.1);

С настройками поиграете...

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


Ссылка на сообщение
Поделиться на другие сайты
-webkit-box-shadow: 0 0 25px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 25px rgba(0,0,0,.1);
 box-shadow: 0 0 25px rgba(0,0,0,.1);
-o-box-shadow: 0 0 25px rgba(0,0,0,.1);

С настройками поиграете...

 

я так понимаю это нужно вставить в css но куда именно? не подскажете?

вот часть кода с файла css в котором идет речь о категориях 

 

.category-page {
    padding: 0;
}
.category-page li {
    display: inline-block;
    margin: 5px 2px 12px;
}
.category-page a {
background: #eee none repeat scroll 0 0;
    border: 1px solid #ddd;
    padding: 3px 7px;
margin: 0 5px;
transition: all 0.3s ease-out 0s;
}
.category-page a:hover {
background: #fff none repeat scroll 0 0;
    border: 1px solid #eee;
transition: all 0.9s ease-out 0s;
}

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


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

hover -- определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

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


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

блин не чего не получается 

 

что нужно прописать перед 

-webkit-box-shadow: 0 0 25px rgba(0,0,0,.1);
-moz-box-shadow: 0 0 25px rgba(0,0,0,.1);
box-shadow: 0 0 25px rgba(0,0,0,.1);
-o-box-shadow: 0 0 25px rgba(0,0,0,.1);

 

например .category-page :hover или что и в какую часть вставить

уже как не пробовал все равно не как( 

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


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

.category-page li:hover {

***

}

Изменено пользователем cloudrc

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


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

как уже не пробовал не чего не происходит 

может это связано с тем что у меня стоит модуль на отображение картинок подкатегорий?

subcat_images.ocmod.xml

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


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

Я смотрю тут потихоньку магазин чужими руками собирается.

 

Подсказка номер два.Открываем category.tpl, находим 

 

<div class="col-sm-3>

в который обёрнуты подкатегории эти.Добавляем класс(любой)

 

Так например  

<div class="col-sm-3  list">

В стили добавляем 

 

.list:hover {
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
box-shadow: 0 15px 30px rgba(100,119,252,3);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -4px, 0);
}

и срочно бежим подучить HTML-CSS....

 
  • +1 1

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


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

 

Я смотрю тут потихоньку магазин чужими руками собирается.

 

Подсказка номер два.Открываем category.tpl, находим 

 

<div class="col-sm-3>

в который обёрнуты подкатегории эти.Добавляем класс(любой)

 

Так например  

<div class="col-sm-3  list">

В стили добавляем 

 

.list:hover {
-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
box-shadow: 0 15px 30px rgba(100,119,252,3);
-webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -4px, 0);
}

и срочно бежим подучить HTML-CSS....

 

 

вам конечно как всегда респект и уважение ваша помощь как всегда верна

к сожалению просто нет времени учить(

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


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

Ну вот накой они там эти тени?В чём суть траты времени на эту безделушку?

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


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

Ну вот накой они там эти тени?В чём суть траты времени на эту безделушку?

вы про то что я не поставил тени?

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


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

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

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


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

Тени благодаря вашим знаниям удалось добавить но вот в связи с отсутствием у меня знаний не получилось до ума довести

конечно на торговлю не повлияет присто хотелось красиво сделать

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


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

вот поставил тени я думаю любому понятно что без доработки так оно смотрится совсем не очень

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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