Картинки фиксированой длины, контент с blur не видно при наведении
При загрузке картинок разной длины мне нужен один и тот же размер к примеру
208px x 208px. Но при адаптивности например этот размер то маленький, то большой. Как правильно адаптировать картинки высоту и длину, и можно ли это сделать с помощью % что бы не писать нужный размер и margin при разных размерах экрана? Еще контент div'a не видит blur: hover при наведении на картинку, как исправить?
.service-item-price {
font-size: 1.2em;
font-weight: 600;
font-family: "Roboto Slab", sans-serif !important;
text-align: center !important;
}
.service-item-price span {
color: $primary-color !important;
&-price {
color: $primary-color !important;
margin-top: 5px;
margin-bottom: 15px;
}
}
.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;
&:hover {
filter: blur(4px);
}
}
.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;
}
}
}<div class="service-item">
<div class="service-item-image">
<img src="{{url('/storage/'.$product->getImages()[0])}}" alt="Alt">
<v-btn outlined itemprop="url" href="{{$product->link}}" rounded color="white">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>