Desaturate and add drop shadow

Question

Я пытаюсь выполнить две вещи с помощью значков социального обмена на сайте, над которым я работаю.

Во-первых, я хотел бы добавить тень. то я хотел бы, чтобы они были ненасыщенными по умолчанию, и цветными на hover.

Ниже приведен код, который я использую:

.a2a_floating_style.a2a_vertical_style img { 
-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    -webkit-transition:all .4s; 
    -moz-transition:all .4s; 
    -ms-transition:all .4s; 
    -o-transition:all .4s; 
    transition:all .4s; 
} 

.a2a_floating_style.a2a_vertical_style img:not(:hover) { 
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    -webkit-filter:grayscale(100%); 
    -moz-filter:grayscale(100%); 
    -ms-filter:grayscale(100%); 
    -o-filter:grayscale(100%); 
    filter:grayscale(100%); 
} 
.a2a_floating_style.a2a_vertical_style img:hover { 
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    -webkit-filter:grayscale(0%); 
    -moz-filter:grayscale(0%); 
    -ms-filter:grayscale(0%); 
    -o-filter:grayscale(0%); 
    filter:grayscale(0%); 
} 

Это делает немного насыщения, но не тень. Если я удалю инструкции десатурации, то это будет тень тени.

Есть ли способ, которым я должен организовать это, так что оба эффекта будут работать?

Спасибо.

Answer 1

Вы перезаписываете фильтр css, а не добавляете фильтр к существующим фильтрам. При удалении некоторых CSS линий проблема становится ясно:

-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
-webkit-filter: grayscale(0%); 

Однако вы можете поставить несколько фильтров, разделяя их пробелами:

-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)) grayscale(0%);