0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 747 Просмотров
*

Patriot1986

  • Осваиваюсь на форуме
  • 47
  • 0 / 0
Буду признателен если кто поможет разобраться с 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

  • Гуру
  • 6434
  • 745 / 3
Не надо тут второй картинки.

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

Patriot1986

  • Осваиваюсь на форуме
  • 47
  • 0 / 0
Не надо тут второй картинки.

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

Это вместо чего и куда?
*

Shustry

  • Гуру
  • 6434
  • 745 / 3
Код: css
.jm-icons a:not(:hover) span.bg {
 -webkit-filter: grayscale(1;
 -moz-filter: grayscale(1);
 -ms-filter: grayscale(1);
 filter: grayscale(1);
}

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

Код: css
.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

  • Осваиваюсь на форуме
  • 47
  • 0 / 0
Этот вариант не работает... :(
*

Patriot1986

  • Осваиваюсь на форуме
  • 47
  • 0 / 0
Этот вариант не работает... :(
Код: css
.jm-icons a:not(:hover) span.bg {
 -webkit-filter: grayscale(1;
 -moz-filter: grayscale(1);
 -ms-filter: grayscale(1);
 filter: grayscale(1);
}

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

Код: css
.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
Код: css
.jm-icons a:not(:hover) span.bg {
 -webkit-filter: grayscale(1;
 -moz-filter: grayscale(1);
 -ms-filter: grayscale(1);
 filter: grayscale(1);
}

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

Код: css
.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;
}
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

widgetkit slideset - js, как убрать стиль?

Автор all_zer

Ответов: 0
Просмотров: 235
Последний ответ 22.09.2023, 12:02:27
от all_zer
Изменение отображения модуля от разрешения экрана

Автор mag_num83

Ответов: 5
Просмотров: 512
Последний ответ 17.05.2023, 09:35:23
от Театрал
CSS стиль для значения поля в списке материалов

Автор Vlad1

Ответов: 8
Просмотров: 487
Последний ответ 29.06.2022, 03:09:37
от Ciaoatutti
Вывод картинки, находящейся внутри нескольких блоков, на всю ширину экрана

Автор GuDeVic

Ответов: 10
Просмотров: 501
Последний ответ 26.05.2022, 17:42:59
от marksetter
Как вставить описание картинки в Joomla 3.10.8?

Автор Benderalfa

Ответов: 8
Просмотров: 546
Последний ответ 25.04.2022, 21:51:55
от Benderalfa