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

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
CSS Hover для картинки
« : 20.06.2016, 09:52:56 »
Люди добрые, подскажите пошагово как применить CSS http://www.ipetrenko.ru/2013/08/images-hover-effects.html (Фокусирование) для картинок в модуле HTML на сайте http://terepere.com (Круглые картинки - ссылки) внизу сайта.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #1 : 20.06.2016, 12:51:54 »
1. Поставил я этот эффект-ужасный.
2. У вас круглые и так картинки. Вы лучше объясните, что с вашими картинками должно происходить.
Как ставить -там же код есть.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #2 : 20.06.2016, 13:20:48 »
мне нужен эффект при наведении, если что-то посоветуете свое, буду очень рад. Проблема в том что мне не понятно как это сделать. Можете по шагам объяснить? Какой файл открыть куда что вставить и как к картинкам в HTML модуле прикрутить это?
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #3 : 20.06.2016, 13:24:34 »
http://gudh.github.io/ihover/dist/index.html
вот для ваших круглешочков намного интереснее эффекты.
выбирайте, скажу как внедрить
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #4 : 20.06.2016, 13:35:11 »
 :D
Hover Effect 3 - 5
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #5 : 20.06.2016, 13:40:25 »
:D
Hover Effect 3 - 5
что такое 3-5?
3 эффект, а 5 что такое? номер картинки? если номер, то название эффекта(там написано)
или скажите, какая сверху в каком ряду.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #6 : 20.06.2016, 13:42:19 »
Если так то получается, 3-ий ряд - 1-ая картинка.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #7 : 20.06.2016, 13:43:20 »
Если так то получается, 3-ий ряд - 1-ая картинка.
там всего 2 ряда в каждом эффекте.
вы скажите номер эффекта,1 или 2 ряд и какая картинка сверху в ряду этом
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #8 : 20.06.2016, 13:44:36 »
Картинка над описанием остается уменьшеная )
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #9 : 20.06.2016, 13:45:23 »
Номер эффекта - 3
Первый ряд
3-яя
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #10 : 20.06.2016, 14:06:43 »
Открываете файл в шаблоне template.css и туда вставляете:
Спойлер
[свернуть]

Заходите в модуль ваш, который картинки отображает и вставляете в режиме кода:

Спойлер
[свернуть]

Т.е. это заменить на вашу картинку.
Дайте весь код модуля в спойлере-я вам припишу его по новому.

Надписи и размеры регулируете в CSS и в последнем коде.
так как картинка не одна и они горизонтально идут-нужно изменить разметку в модуле.

А вообще можно весь файл CSS у них скачать и ставить любые эффекты.
Просто сначало этот сделайте.
« Последнее редактирование: 20.06.2016, 14:12:11 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #11 : 20.06.2016, 14:14:37 »
Всё сделал. Но не получилось (( http://terepere.com
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #12 : 20.06.2016, 14:19:18 »
Может что-то с чем-то конфликтует?  :'(
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #13 : 20.06.2016, 14:19:28 »
вы стили не добавили или не туда.
у вас они просто не загружены.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #14 : 20.06.2016, 14:22:43 »
вы стили не добавили или не туда.
у вас они просто не загружены.
В template.css шаблона, в самый низ добавил
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #15 : 20.06.2016, 14:27:37 »
Спойлер
[свернуть]

Это скачайте, установите, это расширенный модуль, и из спойлера всё вставьте в модуль этот в ячейку Custom HTML
Ну и понятно, опубликуйте и посмотрите, работает или нет.
Я поставил только что-у меня работает.
http://extensions.joomla.org/extension/custom-html-advanced
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #16 : 20.06.2016, 14:34:30 »
 yes! Заработало! ))) Только теперь как дальше то быть?
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #17 : 20.06.2016, 14:42:40 »
Ну а теперь вам нужно сделать ваше количество разных картинок в ряд, а CSS можете вверху в <style></style> так и оставить.
Видно всё таки вы не туда тулили CSS.
Ну и надписи сделать и размеры нужные.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

vitalid

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Re: CSS Hover для картинки
« Ответ #18 : 20.06.2016, 15:01:23 »
Спасибо тебе Добрый Человек! Всё по скайпу объяснил, рассказал и показал! yes!  *DRINK*
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Re: CSS Hover для картинки
« Ответ #19 : 20.06.2016, 15:13:34 »
Не за что ...

Добавлю и сюда из лички код, вдруг и другим надо, как сделать горизонтально:
Спойлер
[свернуть]

Спойлер
[свернуть]
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Увиличение картинки при наведении

Автор vova630

Ответов: 0
Просмотров: 870
Последний ответ 25.03.2018, 02:45:33
от vova630
:hover и :active {

Автор RicoID

Ответов: 1
Просмотров: 928
Последний ответ 21.11.2016, 12:22:04
от darkghost
Как задать :hover{ и :active { Для одной кнопки?

Автор RicoID

Ответов: 2
Просмотров: 2143
Последний ответ 18.11.2016, 16:34:43
от ProtectYourSite
Стиль для всплывающего названия картинки- как?

Автор epson950

Ответов: 3
Просмотров: 1291
Последний ответ 03.11.2016, 01:04:05
от AlekVolsk
Позиционирование картинки от края до края

Автор BestorWeb

Ответов: 5
Просмотров: 1383
Последний ответ 09.03.2016, 15:12:12
от Shustry