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

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

Как сделать что бы картинка увеличивалась при наведении курсора?

 (Прочитано 228 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« : 30.06.2016, 20:32:43 »

Как сделать что бы картинка увеличивалась при наведении курсора?
Записан
Филипп Сорокин
Живу я здесь
******

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

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


« Ответ #1 : 30.06.2016, 20:37:50 »

И вам добрый вечер. Средствами CSS:

Код
img {
   transition: width 2s;
}
 
img:hover {
   width: 1000%;
   height: 1000%;
   max-width: 1000%;
}
 
« Последнее редактирование: 30.06.2016, 20:46:24 от Филипп Сорокин » Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #2 : 30.06.2016, 20:43:59 »

И вам добрый вечер. Средствами CSS:

Код:
img {
    transition: width 2s;
}

img:hover {
    width: 1000%;
    height: 1000%;
    max-width: 1000%;
}

Добрый вечер) А куда ставить код?
Записан
Филипп Сорокин
Живу я здесь
******

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

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


« Ответ #3 : 30.06.2016, 20:45:49 »

А без разницы - куда больше нравится Azn
В конец любого файла CSS. Если не сработает, то попробуйте так:

Код
img {
   transition: width 2s;
}
 
img:hover {
   width: 1000% !important;
   height: 1000% !important;
   max-width: 1000% !important;
}
Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #4 : 30.06.2016, 20:47:17 »

А без разницы - куда больше нравится Azn
В конец любого файла CSS. Если не сработает, то попробуйте так:

Код
img {
   transition: width 2s;
}
 
img:hover {
   width: 1000% !important;
   height: 1000% !important;
   max-width: 1000% !important;
}

Мне надо что бы верхние картинки увеличивались если на них наводят курсор.
вот ссылка vyveska1.ru/vyveski
Сейчас сделано одной целой картинкой, но буду заливать по одной.
Вывод на страницу будет ч/з HTML код.
Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #5 : 30.06.2016, 20:49:00 »

А без разницы - куда больше нравится Azn
В конец любого файла CSS. Если не сработает, то попробуйте так:

Код
img {
   transition: width 2s;
}
 
img:hover {
   width: 1000% !important;
   height: 1000% !important;
   max-width: 1000% !important;
}

Может подскажите хотя бы в какую папку.
И мне не надо что бы это правило распространялось на все картинки на сайте.
Надо что бы только на конкретные в коде HTML
« Последнее редактирование: 30.06.2016, 20:53:25 от Galina2307 » Записан
Филипп Сорокин
Живу я здесь
******

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

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


« Ответ #6 : 30.06.2016, 20:53:56 »

Надёжнее всего сразу вставить код в индексный файл Вашего шаблона - так сработает наверняка!

Код:
/templates/ваш_шаблон/index.php

Открываете его и вставляете php код в начало файла после строки defined('_JEXEC') or die()

Код
/templates/ваш_шаблон/index.php

собственно, код:

Код
JFactory::getDocument()->addStyleDeclaration("
   img {
       transition: width 2s;
   }
 
   img:hover {
       width: 1000% !important;
       height: 1000% !important;
       max-width: 1000% !important;
   }
"
);
 
Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #7 : 30.06.2016, 22:26:43 »

Ничего не получилось. Вопрос актуален 
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Online Online

Сообщений: 1250


« Ответ #8 : 30.06.2016, 22:51:41 »

Код
a:hover img {
   transform: scale(1.1);
}
a {overflow:hidden;}
Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #9 : 30.06.2016, 23:04:12 »

Код
a:hover img {
   transform: scale(1.1);
}
a {overflow:hidden;}


Это куда?
Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #10 : 30.06.2016, 23:06:18 »

Нужно что бы увеличивались только картинки которые стоят сразу под горизонтальным меню.
сайт vyveska1.ru
Записан
fbr
Живу я здесь
******

Репутация: +136/-6
Online Online

Сообщений: 1250


« Ответ #11 : 30.06.2016, 23:51:21 »

В стилевой файл вашего шаблона:
Код
.vt_moduletable_content img {
   transform: scale(1.0);
   transition: all .3s;
}
.vt_moduletable_content img:hover {
   transform: scale(1.1);
}
Записан
Galina2307
Осваиваюсь на форуме
***

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

Сообщений: 129


« Ответ #12 : 01.07.2016, 09:13:12 »

В стилевой файл вашего шаблона:
Код
.vt_moduletable_content img {
   transform: scale(1.0);
   transition: all .3s;
}
.vt_moduletable_content img:hover {
   transform: scale(1.1);
}

Спасибо Вам огромное. Помогло
Записан
Страниц: [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