Форум русской поддержки Joomla!® CMS
05.12.2016, 16:37:52 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

CSS Hover для картинки

 (Прочитано 293 раз)
0 Пользователей и 1 Гость смотрят эту тему.
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« : 20.06.2016, 10:52:56 »

Люди добрые, подскажите пошагово как применить CSS http://www.ipetrenko.ru/2013/08/images-hover-effects.html (Фокусирование) для картинок в модуле HTML на сайте http://terepere.com (Круглые картинки - ссылки) внизу сайта.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #1 : 20.06.2016, 13:51:54 »

1. Поставил я этот эффект-ужасный.
2. У вас круглые и так картинки. Вы лучше объясните, что с вашими картинками должно происходить.
Как ставить -там же код есть.
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #2 : 20.06.2016, 14:20:48 »

мне нужен эффект при наведении, если что-то посоветуете свое, буду очень рад. Проблема в том что мне не понятно как это сделать. Можете по шагам объяснить? Какой файл открыть куда что вставить и как к картинкам в HTML модуле прикрутить это?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #3 : 20.06.2016, 14:24:34 »

http://gudh.github.io/ihover/dist/index.html
вот для ваших круглешочков намного интереснее эффекты.
выбирайте, скажу как внедрить
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #4 : 20.06.2016, 14:35:11 »

 Cheesy
Hover Effect 3 - 5
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #5 : 20.06.2016, 14:40:25 »

Cheesy
Hover Effect 3 - 5
что такое 3-5?
3 эффект, а 5 что такое? номер картинки? если номер, то название эффекта(там написано)
или скажите, какая сверху в каком ряду.
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #6 : 20.06.2016, 14:42:19 »

Если так то получается, 3-ий ряд - 1-ая картинка.
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #7 : 20.06.2016, 14:43:20 »

Если так то получается, 3-ий ряд - 1-ая картинка.
там всего 2 ряда в каждом эффекте.
вы скажите номер эффекта,1 или 2 ряд и какая картинка сверху в ряду этом
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #8 : 20.06.2016, 14:44:36 »

Картинка над описанием остается уменьшеная )
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #9 : 20.06.2016, 14:45:23 »

Номер эффекта - 3
Первый ряд
3-яя
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #10 : 20.06.2016, 15:06:43 »

Открываете файл в шаблоне template.css и туда вставляете:
Показать текстовый блок

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

Показать текстовый блок

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

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

А вообще можно весь файл CSS у них скачать и ставить любые эффекты.
Просто сначало этот сделайте.
« Последнее редактирование: 20.06.2016, 15:12:11 от vipiusss » Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #11 : 20.06.2016, 15:14:37 »

Всё сделал. Но не получилось (( http://terepere.com
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #12 : 20.06.2016, 15:19:18 »

Может что-то с чем-то конфликтует?  Cry
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #13 : 20.06.2016, 15:19:28 »

вы стили не добавили или не туда.
у вас они просто не загружены.
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #14 : 20.06.2016, 15:22:43 »

вы стили не добавили или не туда.
у вас они просто не загружены.
В template.css шаблона, в самый низ добавил
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #15 : 20.06.2016, 15:27:37 »

Показать текстовый блок

Это скачайте, установите, это расширенный модуль, и из спойлера всё вставьте в модуль этот в ячейку Custom HTML
Ну и понятно, опубликуйте и посмотрите, работает или нет.
Я поставил только что-у меня работает.
http://extensions.joomla.org/extension/custom-html-advanced
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #16 : 20.06.2016, 15:34:30 »

 Yes! Заработало! ))) Только теперь как дальше то быть?
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #17 : 20.06.2016, 15:42:40 »

Ну а теперь вам нужно сделать ваше количество разных картинок в ряд, а CSS можете вверху в <style></style> так и оставить.
Видно всё таки вы не туда тулили CSS.
Ну и надписи сделать и размеры нужные.
Записан
vitalid
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 14


« Ответ #18 : 20.06.2016, 16:01:23 »

Спасибо тебе Добрый Человек! Всё по скайпу объяснил, рассказал и показал! Yes!  drink
Записан
vipiusss
Профи
********

Репутация: +260/-8
Online Online

Пол: Мужской
Сообщений: 4571


Skype: renor_


« Ответ #19 : 20.06.2016, 16:13:34 »

Не за что ...

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

Показать текстовый блок
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet