Obramowanie zdjęcia na hover

Question

Witam

Mam problem w CSS ze zdjęciem. Mianowicie dodałem do obrazka obramowanie i gdy ustawiam selektor :hover to daje tam między innymi blur. Problem polega na tym, że łapie on też to obramowanie i wygląda to słabo. Dlatego mam pytanie, jak zrobić aby te style łapały samo zdjęcie? Proszę o pomoc. 

.cont {
    width: 100%;
}
.img {
    width: 100%;
    border: 0.2rem solid var(--Color9);
    filter: contrast(0.9);
    cursor: pointer;
    transition: .2s ease-in-out;
}
.img:hover {
    filter: contrast(0.6) blur(0.1rem) grayscale(0.7);
}

<div class="cont">
    <img src="images/Subsurface-engineering-1-scaled.jpg" class="img" alt="">
</div>

 

Comments

Czy ten div jest tej samej wielkości, co zdjęcie?

Answer 1

Może, spróbuj np. "dopasować" obrazek do

<div class="cont">

i obramowanie ustaw dla div-a.