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

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

Patriot1986

  • Осваиваюсь на форуме
  • ***
  • 33
  • 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

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Не надо тут второй картинки.

Код: css
img:not(:hover) {
 -webkit-filter: grayscale(1;
 -moz-filter: grayscale(1);
 -ms-filter: grayscale(1);
 filter: grayscale(1);
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Patriot1986

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

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

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

*

Shustry

  • Группа развития
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: 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;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Patriot1986

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

*

Patriot1986

  • Осваиваюсь на форуме
  • ***
  • 33
  • 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;
}