Я хочу чтобы при наведении мыши над картинкой, она имела свойство размытости, но не могу понять, где ошибка?
У меня получилось так что цвет также имеет свойство размытия, но мне это не нужно, мне нужно что бы только изображение имело это свойство, а не весь div.
Подскажите ,пожалуйста, где исправить. Спасибо
<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> 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;
}
}
}
.v-btn
? Тег<v-btn>
вижу, а класс - нет.