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> 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>