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

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

CSS стиль, изменение картинки при наведлении

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

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

Сообщений: 41


« : 21.04.2016, 03:49:51 »

Буду признателен если кто поможет разобраться с CSS сам не так и уж силен... Суть в шаблоне есть социальные кнопки (arendator116.ru) внизу,  я их уже заменил и хотел бы видеть таким образом: в неактивном состоянии черно-белые, при наведении цветные... в самом шаблоне и коде используется два вида картинок обычная и обычная-light, но как я понял из кода идет не замена одна на другую, а просто меняется прозрачность... может кто сможет указать что не так? Код ниже:



.jm-icons {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.jm-icons a {
  display: inline-block;
  text-decoration: none !important;
  position: relative;
  margin: 10px;
}
.jm-icons a.jm-facebook span.bg,
.jm-icons a.jm-google span.bg,
.jm-icons a.jm-twitter span.bg,
.jm-icons a.jm-vk span.bg,
.jm-icons a.jm-linkedin span.bg {
  width: 76px;
  height: 76px;
  display: inline-block;
}
.jm-icons a:hover span.bg {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


.jm-icons a.jm-vk span.bg {
  background: url('../images/social/vk.png');
}



.jm-icons a.jm-facebook span.bg {
  background: url('../images/social/facebook.png');
}
.jm-icons a.jm-google span.bg {
  background: url('../images/social/googleplus.png');
}
.jm-icons a.jm-twitter span.bg {
  background: url('../images/social/twitter.png');
}
.jm-icons a.jm-linkedin span.bg {
  background: url('../images/social/linkedin.png');
}
.jm-footer .jm-icons a.jm-facebook span.bg {
  background: url('../images/social/facebook-light.png');
}
.jm-footer .jm-icons a.jm-google span.bg {
  background: url('../images/social/googleplus-light.png');
}
.jm-footer .jm-icons a.jm-twitter span.bg {
  background: url('../images/social/twitter-light.png');
}
.jm-footer .jm-icons a.jm-linkedin span.bg {
  background: url('../images/social/linkedin-light.png');
}

.jm-footer .jm-icons a.jm-vk span.bg {
  background: url('../images/social/vk-light.png');
}

.jm-icons a span.ttip {
  width: 100px;
  height: auto;
  line-height: 20px;
  padding: 10px 5px;
  right: 50%;
  margin-right: -55px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  bottom: 85px;
  opacity: 0;
  filter: alpha(opacity=0);
  pointer-events: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.jm-icons a span.ttip:before,
.jm-icons a span.ttip:after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 50%;
  margin-right: -6px;
  width: 0px;
  height: 0px;
  border-style: solid inset;
  border-width: 7px 7px 0 7px;
}
.jm-icons a:hover span.ttip {
  opacity: 1;
  filter: alpha(opacity=100);
}
.jm-icons a.jm-facebook span.ttip {
  background: #4e67a9;
}
.jm-icons a.jm-facebook span.ttip:before,
.jm-icons a.jm-facebook span.ttip:after {
  border-color: #4e67a9 transparent transparent transparent;
}
.jm-icons a.jm-twitter span.ttip {
  background: #42c8f4;
}
.jm-icons a.jm-twitter span.ttip:before,
.jm-icons a.jm-twitter span.ttip:after {
  border-color: #42c8f4 transparent transparent transparent;
}
.jm-icons a.jm-google span.ttip {
  background: #dd4c39;
}
.jm-icons a.jm-google span.ttip:before,
.jm-icons a.jm-google span.ttip:after {
  border-color: #dd4c39 transparent transparent transparent;
}
.jm-icons a.jm-linkedin span.ttip {
  background: #0077b5;
}
.jm-icons a.jm-vk span.ttip {
  background: #5a7fa7;
}
.jm-icons a.jm-vk span.ttip:before,
.jm-icons a.jm-vk span.ttip:after {
  border-color: #5a7fa7 transparent transparent transparent;
}
.jm-icons a.jm-linkedin span.ttip:before,
.jm-icons a.jm-linkedin span.ttip:after {
  border-color: #0077b5 transparent transparent transparent;
}
Записан
Shustry
Группа развития
*****

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

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


Рисую дизайны


« Ответ #1 : 21.04.2016, 03:57:22 »

Не надо тут второй картинки.

Код
img:not(:hover) {
-webkit-filter: grayscale(1;
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}
 
Записан
Patriot1986
Осваиваюсь на форуме
***

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

Сообщений: 41


« Ответ #2 : 21.04.2016, 10:00:29 »

Не надо тут второй картинки.

Код
img:not(:hover) {
-webkit-filter: grayscale(1;
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}
 

Это вместо чего и куда?
Записан
Shustry
Группа развития
*****

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

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


Рисую дизайны


« Ответ #3 : 21.04.2016, 16:05:12 »

Код
.jm-icons a:not(:hover) span.bg {
-webkit-filter: grayscale(1;
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}

А отсюда убрать две строки:

Код
.jm-icons a:hover span.bg {
 opacity: 0.5; /*эту*/
 filter: alpha(opacity=50); /* и эту*/
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
Записан
Patriot1986
Осваиваюсь на форуме
***

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

Сообщений: 41


« Ответ #4 : 22.04.2016, 02:14:33 »

Этот вариант не работает... Sad
Записан
Patriot1986
Осваиваюсь на форуме
***

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

Сообщений: 41


« Ответ #5 : 23.04.2016, 20:38:30 »

Этот вариант не работает... Sad
Код
.jm-icons a:not(:hover) span.bg {
-webkit-filter: grayscale(1;
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}

А отсюда убрать две строки:

Код
.jm-icons a:hover span.bg {
 opacity: 0.5; /*эту*/
 filter: alpha(opacity=50); /* и эту*/
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
[/quot
Код
.jm-icons a:not(:hover) span.bg {
-webkit-filter: grayscale(1;
-moz-filter: grayscale(1);
-ms-filter: grayscale(1);
filter: grayscale(1);
}

А отсюда убрать две строки:

Код
.jm-icons a:hover span.bg {
 opacity: 0.5; /*эту*/
 filter: alpha(opacity=50); /* и эту*/
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

Я правильно понимаю он такой должен стать?


.jm-icons {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.jm-icons a {
  display: inline-block;
  text-decoration: none !important;
  position: relative;
  margin: 10px;
}
.jm-icons a.jm-facebook span.bg,
.jm-icons a.jm-google span.bg,
.jm-icons a.jm-twitter span.bg,
.jm-icons a.jm-vk span.bg,
.jm-icons a.jm-linkedin span.bg {
  width: 76px;
  height: 76px;
  display: inline-block;
}
.jm-icons a:not(:hover) span.bg {
 -webkit-filter: grayscale(1;
 -moz-filter: grayscale(1);
 -ms-filter: grayscale(1);
 filter: grayscale(1);
}
.jm-icons a:hover span.bg {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.jm-icons a.jm-vk span.bg {
  background: url('../images/social/vk.png');
}
.jm-icons a.jm-facebook span.bg {
  background: url('../images/social/facebook.png');
}
.jm-icons a.jm-google span.bg {
  background: url('../images/social/googleplus.png');
}
.jm-icons a.jm-twitter span.bg {
  background: url('../images/social/twitter.png');
}
.jm-icons a.jm-linkedin span.bg {
  background: url('../images/social/linkedin.png');
}
.jm-footer .jm-icons a.jm-facebook span.bg {
  background: url('../images/social/facebook-light.png');
}
.jm-footer .jm-icons a.jm-google span.bg {
  background: url('../images/social/googleplus-light.png');
}
.jm-footer .jm-icons a.jm-twitter span.bg {
  background: url('../images/social/twitter-light.png');
}
.jm-footer .jm-icons a.jm-linkedin span.bg {
  background: url('../images/social/linkedin-light.png');
}
.jm-footer .jm-icons a.jm-vk span.bg {
  background: url('../images/social/vk-light.png');
}
.jm-icons a span.ttip {
  width: 100px;
  height: auto;
  line-height: 20px;
  padding: 10px 5px;
  right: 50%;
  margin-right: -55px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  bottom: 85px;
  opacity: 0;
  filter: alpha(opacity=0);
  pointer-events: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.jm-icons a span.ttip:before,
.jm-icons a span.ttip:after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 50%;
  margin-right: -6px;
  width: 0px;
  height: 0px;
  border-style: solid inset;
  border-width: 7px 7px 0 7px;
}
.jm-icons a:hover span.ttip {
  opacity: 1;
  filter: alpha(opacity=100);
}
.jm-icons a.jm-facebook span.ttip {
  background: #4e67a9;
}
.jm-icons a.jm-facebook span.ttip:before,
.jm-icons a.jm-facebook span.ttip:after {
  border-color: #4e67a9 transparent transparent transparent;
}
.jm-icons a.jm-twitter span.ttip {
  background: #42c8f4;
}
.jm-icons a.jm-twitter span.ttip:before,
.jm-icons a.jm-twitter span.ttip:after {
  border-color: #42c8f4 transparent transparent transparent;
}
.jm-icons a.jm-google span.ttip {
  background: #dd4c39;
}
.jm-icons a.jm-google span.ttip:before,
.jm-icons a.jm-google span.ttip:after {
  border-color: #dd4c39 transparent transparent transparent;
}
.jm-icons a.jm-linkedin span.ttip {
  background: #0077b5;
}
.jm-icons a.jm-vk span.ttip {
  background: #5a7fa7;
}
.jm-icons a.jm-vk span.ttip:before,
.jm-icons a.jm-vk span.ttip:after {
  border-color: #5a7fa7 transparent transparent transparent;
}
.jm-icons a.jm-linkedin span.ttip:before,
.jm-icons a.jm-linkedin span.ttip:after {
  border-color: #0077b5 transparent transparent transparent;
}
Записан
Страниц: [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