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 that you have read and understand our privacy policy and code of conduct.

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