Буду признателен если кто поможет разобраться с 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;
}