CSS Hover для картинки - Вопросы по CSS

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

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

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

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

 
Hover Effect 3 - 5

Hover Effect 3 - 5

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

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

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

там всего 2 ряда в каждом эффекте.
вы скажите номер эффекта,1 или 2 ряд и какая картинка сверху в ряду этом

Картинка над описанием остается уменьшеная )

Номер эффекта - 3
Первый ряд
3-яя

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

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


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

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

А вообще можно весь файл CSS у них скачать и ставить любые эффекты.
Просто сначало этот сделайте.

Всё сделал. Но не получилось (( http://terepere.com

Может что-то с чем-то конфликтует? 

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

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

В template.css шаблона, в самый низ добавил

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

  Заработало! ))) Только теперь как дальше то быть?

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

Спасибо тебе Добрый Человек! Всё по скайпу объяснил, рассказал и показал!  

Не за что ...

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