CSS Border radius и фильтр оттенков серого не работают вместе

Question

У меня есть CSS, который использует как граничный радиус, так и фильтр оттенков серого. Я хочу, чтобы радиус границы был постоянно на месте, но оттенки серого исчезали при наведении курсора.

Радиус границы работает нормально, пока я не добавлю оттенки серого, затем он перестает работать и просто отображает изображения в виде квадрата. При наведении (когда фильтр удален) снова срабатывает border-radius. Кто-нибудь знает, что мне не хватает?

Я искал, но не нашел ответа.

.esg-entry-media {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.esg-entry-media:hover {
    border: solid 10px #fff !important;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

Я включил изображение состояний наведения и отсутствия наведения для справки.

Answer 1

Вы можете использовать div, чтобы обернуть изображение, поместив overflow: hidden;на нем и задайте div той же ширины и высоты. Затем введите радиус границы: 50%; на div. Применяйте только оттенки серого к изображению. В конце, чтобы изменить img do,

div:hover .esg-entry-media{
  filter: grayscale(0)
}

В обертке div do,

div:hover {
  border: 10px solid *coloryouwant*
}

Answer 2

Какой браузер? у меня отлично работает (хром, Firefox, сафари):

.esg-entry-media {
    width: 250px;
    height: 250px;
    border: 10px solid transparent;
    border-radius: 50%;
    filter: grayscale(100%);
}

.esg-entry-media:hover {
    border-color: #a00;
    filter: grayscale(0%);
}

<img src="http://placekitten.com/200/300" class="esg-entry-media" />