4

Я хочу чтобы при наведении мыши над картинкой, она имела свойство размытости, но не могу понять, где ошибка?

У меня получилось так что цвет также имеет свойство размытия, но мне это не нужно, мне нужно что бы только изображение имело это свойство, а не весь div.

Подскажите ,пожалуйста, где исправить. Спасибо

<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>&nbsp; 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;


        }

    }
}
1
  • Где у Вас используется класс .v-btn? Тег <v-btn> вижу, а класс - нет.
    – UModeL
    18 сен 2020 в 15:53

1 ответ 1

4

Используйте .parent-element:hover .child-element
Таким образом, при наведении на родительский элемент, его ребёнок будет изменяться
Также вы можете добавить transition тому элементу, который хотите анимировать
Пример записи, если мы хотим, чтобы в элементе анимировано линейно изменялось свойство color(цвет-текста) в течении 0.2 cекунд:
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>

1
  • спасибо большое
    – Inna
    19 сен 2020 в 21:55

Ваш ответ

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

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