2

введите сюда описание изображения

мне нужно чтобы при наведении на картинку выдвигалась анимация при который выдвигается кнопка и картинка стала размытой. У меня получилось так что либо картинку размывает и кнопка как то выдвигается тогда когда я убираю мышку. В чем моя ошибка?

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

2

1 ответ 1

2

Вот это поможет?

.portfolio ul,
.portfolio li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.portfolio li {
  display: inline-block;
  width: max-content;
  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;
  width: 100%;
  height: 100%;
  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;
  height: 100%;
  width: 450px;
  z-index: 1;
  filter: brightness(0.8);
}

.portfolio li .my-scale {
  height: 100%;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  display: flex;
  justify-content: center;
  align-items: center;
}
<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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.