0

Я пытаюсь сделать hover:blur. Мне нужно, чтобы при наведении курсора на изображение картинка размывалась, когда пытаюсь это сделать

.portfolio img:hover либо after { -webkit-filter: blur(10px); filter: blur(10px) }

не работает, почему? Как я могу исправить эту проблему?

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

.portfolio img:after {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

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

.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 class="img-desc" src="http://via.placeholder.com/250x250/33ff99/555555?text=Foto" alt="Alt">
    </li>
  </ul>
</div>

2
  • только нужно что-то придумать с высотой, сейчас попробую
    – Andrey S
    6 сен 2020 в 12:16
  • не совсем понятна задумка, мне кажется главная проблема в 2 разных hover эффектах
    – Andrey S
    6 сен 2020 в 12:41

1 ответ 1

1

нужно вот тут заменить after .portfolio img:after { -webkit-filter: blur(10px); filter: blur(10px); } прописать hover .portfolio img:hover { -webkit-filter: blur(10px); filter: blur(10px); }

и еще вот в .descr нужно убрать высоту

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

.portfolio img:hover {
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.descr {
  border-radius: 32px;
  position: absolute;
  left: 0;
  width: 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;
}

.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 class="img-desc" src="http://via.placeholder.com/250x250/33ff99/555555?text=Foto" alt="Alt">
    </li>
  </ul>
</div>

Ваш ответ

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

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