html – Blur effect on hover

Question:

I want it to have a blur property when hovering the mouse over the picture, but I can't figure out where the error is?

It turned out that the color also has a blur property, but I don’t need it, I need only the image to have this property, and not the whole div.

Please tell me where to fix it. Thank you

<div class="service-item">
        <div class="service-item-image">
            <img class="response-square" src="{{url('/storage/'.$product->getImages()[0])}}" alt="Alt">
            <v-btn outlined itemprop="url" href="{{$product->link}}" rounded color="white">{{__('my.Skonfiguruj zamówienia')}}</v-btn>
        </div>
        <div class="service-item-price">
            <h4>{{$product->name}}</h4>
            <span class="price" content="{{$product->calculated}}">
                Od {{$product->calculated}}<span>&nbsp; zł / 100 szt.</span>
            </span>
        </div>
    </div>

.service-item {
    margin-left: 4px;
    margin-right: 4px;


    h4{
        margin-top: 15px;
        text-align: center !important;
        font-size: 17px !important;
    }

    &:hover {

        .service-item-image {

            .v-btn {
                opacity: 1;
                top: 45%;
            }

            &::before {
                border-radius: 17px;
                opacity: .6;

            }

        }
    }

    &-image {
        min-height: max-content !important;
        background-size: cover !important;
        position: relative !important;

        img{
            width: 100%;
            border: 2px solid #FFEBF6;
            border-radius: 19px;
            object-fit: cover;

        }

        .v-btn{
            font-size: 14px !important;
            position: absolute !important;
            left: 10% !important;
            height: 55px !important;
            width: 80%;
            top: 80%;
            opacity: 0;
            -webkit-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

            &:after{
                opacity: 1;
            }

        }

        &:before{
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left:0;

            background-color: $primary-color;
            opacity: 0;
            transition: all .5s ease;


        }

    }
}

Answer:

Use .parent-element:hover .child-element
Thus, when hovering over the parent element, its child will change
You can also add a transition to the element you want to animate
An example of a record if we want the color property of the element to animate linearly in 0.2 seconds:
transition: color 0.2s linear

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

:root {
  --transitionTiming: 0.2s linear;
}

body {
  min-height: 100%;
  font-family: 'Roboto', sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

section {
  padding: 40px 0;
}

.container {
  max-width: 1000px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  --size: 200px;
  max-width: var(--size);
  max-height: var(--size);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.flex-item:hover .flex-item-img {
  filter: blur(2px)
}

.flex-item:hover .flex-item-background {
  opacity: 1;
}

.flex-item:hover .flex-item-btn {
  transform: translateY(0);
}

.flex-item-img {
  transition: filter var(--transitionTiming);
}

.flex-item-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(242, 41, 218, 0.5);
  transition: opacity var(--transitionTiming);
}

.flex-item-btn {
  --colorBtn: white;
  outline: none;
  background-color: transparent;
  color: var(--colorBtn);
  border: 1px solid var(--colorBtn);
  padding: 8px 25px;
  cursor: pointer;
  transform: translateY(100px);
  border-radius: 40px;
  transition: transform var(--transitionTiming), color var(--transitionTiming), background-color var(--transitionTiming);
}

.flex-item-btn:hover {
  background-color: var(--colorBtn);
  color: black;
}

<section>
  <div class="container">

    <div class="flex-container">

      <div class="flex-item">
        <div class="flex-item-img">
          <img src="https://picsum.photos/400/400" alt="">
        </div>
        <div class="flex-item-background">
          <span class="flex-item-btn">Кнопка</span>
        </div>
      </div>

    </div>

  </div>
</section>