Эффект при наведении на миниатюру - почти прикрутил, как докрутить?

  • 1 Ответов
  • 524 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

marbert

  • *****
  • 413
  • + 9 -
Здравствуйте, наткнулся на форуме JoomGallery на тему эффектов при наведении курсора (топикстартер пытался прикрутить это к JoomGallery):

http://www.forum.en.joomgallery.net/index.php?topic=7135.0

Вот оригинальная страница эффектов:

http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

Вот сам код (варианта DEMO1):

http://tympanus.net/Tutorials/OriginalHoverEffects/css/style1.css

Попробовал прописать в joomgallery.css этот код, заменив ".view-first" на ".jg_photo_container" (для того, чтобы эффект проявился именно в разделе "Категория") - эффект появился, но:

1. увеличение выходит за пределы миниатюры (в оригинале границы превью не меняются);
2. название категории не отображается внутри превью (хотелось убрать название категории под миниатюрой, отображая его на миниатюре при наведении, как в примере);
3. нет затемняющего цвета (в примере желтого, где он вообще регулируется?).

Словом, что я делаю не так и как сделать так?

Тестирую здесь.
« Последнее редактирование: 24.11.2016, 17:17:42 от marbert »

*

marbert

  • *****
  • 413
  • + 9 -
Дполнение - оставил из всего кода лишь это:

Код
.jg_photo_container img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.jg_photo_container:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}

...эффект остался, для чего было остальное - не понятно.

И поднятые в первом сообщении вопросы - все еще актуальны.