Search code examples
cssgrayscalecss-filtersborder-radius

CSS Border radius and filter grayscale not working together

I have some css in place that uses both a border-radius and a grayscale filter. I want the border radius to be in place all the time but the grayscale to disappear on hover.

The border radius works fine until I add in the grayscale, then it stops working and just shows the images as a square. On hover (when the filter is removed) the border-radius kicks in again. Does anyone know what I am missing?

I have searched but can't find an answer.

.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%);
}

I have included an image of the hover and non-hover states for reference.

enter image description here

Solution

  • You could use a div to wrap around the image put an overflow: hidden; on it and give the div the same width and height. Then put border-radius: 50%; on the div. Only apply the grayscale on the image. At the end to change the img do,

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

    On the wrapping div do,

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