мне нужно чтобы при наведении на картинку выдвигалась анимация при который выдвигается кнопка и картинка стала размытой. У меня получилось так что либо картинку размывает и кнопка как то выдвигается тогда когда я убираю мышку. В чем моя ошибка?
.portfolio ul,
.portfolio li {
margin: 0;
padding: 0;
list-style-type: none;
}
.portfolio li {
display: inline-block;
width: 100%;
position: relative;
overflow: hidden;
}
.portfolio img {
background-color: #FFFBFC;
border: 1px solid #FFEBF6;
border-radius: 28px;
max-width: 100%;
display: block;
-webkit-filter: blur(0);
filter: blur(0)
}
.portfolio:hover img {
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transition: -webkit-filter .5s linear;
transition: -webkit-filter .5s linear;
transition: filter .5s linear;
transition: filter .5s linear, -webkit-filter .5s linear;
transition: 0.5s;
//opacity: 0.6;
//background: #e6007e;
}
.descr {
border-radius: 32px;
position: absolute;
left: 0;
background-color: rgb(230, 0, 126);
text-align: center;
opacity: 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.portfolio li:hover .descr {
opacity: 0.8;
}
.portfolio li .my-scale {
height: 55px !important;
width: 80%;
top: 100%;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.portfolio li:hover .my-scale {
top: 45%;
}
<div class="portfolio">
<ul>
<li>
<span class="descr">
<v-btn class="my-scale " outlined itemprop="url" href="{{$product->link}}" rounded color="white">Skonfiguruj zamówienia</v-btn>
</span>
<img src="https://us.123rf.com/450wm/jojjik/jojjik1808/jojjik180800077/107381866-picturesque-morning-in-plitvice-national-park-colorful-spring-scene-of-green-forest-with-pure-water-.jpg?ver=6" alt="Alt">
</li>