Question

Здравствуйте. Начну по порядку 
Я для одного элемента в новостях прописала CSS3 для изображений. Сделала эффект увеличения с небольшим затемнением вокруг картинки.

Теперь от меня хотят, что бы я сделала такой эффект для всего каталога товаров на сайте. 
Я не разработчик, но базовые знания html и css у меня есть. Помогите, пожалуйста, разобраться куда прописывать CSS или надо закачивать отдельно файл?
Дело в том, что изображения закачиваются в админку напрямую с компьютера. И автоматически добавляются в папку /upload/iblock/.
Вот примерный код который мне надо внедрить:

<st yle type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8 );
-moz-transform:scale(0.8 );
-o-transform:scale(0.8 );
-webkit-transition-duration: 0.3s; 
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(3.1);
-moz-transform:scale(3.1);
-o-transform:scale(3.1);
box-shadow:0px 0px 40px gray;
-webkit-box-shadow:0px 0px 40px gray;
-moz-box-shadow:0px 0px 40px gray;
opacity: 1;
}
</style>


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

Answer 1

Здравствуйте!
Можно попробовать следующий вариант.
1. Найти в какой блок (скорее всего это div с классом) оборачивается товар с картинкой. Если пользуетесь FirBug-ом то возможно знаете как это сделать

2. Далее найти где лежит общий файл стилей примерный путь /bitrix/templates/ваш шаблон/ваш файл стилей

В нем найти этот самый блок и просто прописать css. К примеру если у меня div с классом items_detail, то следующее

Код

.items_detail img {    -webkit-transform:scale(0.8 );    -moz-transform:scale(0.8 );    -o-transform:scale(0.8 );    -webkit-transition-duration: 0.3s;    -moz-transition-duration: 0.3s;    -o-transition-duration: 0.3s;    opacity: 0.7;    margin: 0 10px 5px 0; } .items_detail img:hover {    -webkit-transform:scale(3.1);    -moz-transform:scale(3.1);    -o-transform:scale(3.1);    box-shadow:0px 0px 40px gray;    -webkit-box-shadow:0px 0px 40px gray;    -moz-box-shadow:0px 0px 40px gray;    opacity: 1; }

Как-то так

Answer 2

Спасибо, за ответ! Как просто, оказывается