Задать вопрос
And__Smi
@And__Smi
html

Почему все последующие картинки при повороте наводящегося блока теряют окружность?

Здравствуйте, возник вопрос

Есть 4 блока, у каждого блока такой код (помимо container-row-col.col-xl-3):

.d-flex.flex-column.align-items-center.border.border-primary.pt-4.pb-4.rounded
          .w-150px.h-150px.mb-15px.overflow-hidden.position-relative.transition-duration-2s.rotateY-hover-180deg.bg-primary-hover.opacity-hover-img-none.opacity-hover-link.text-decoration-none-hover-link.text-white-hover-link.rounded-circle.rounded-circle-hover
           img(src="img/pages/case/best-team/1.jpg" alt="First person of the best team").position-absolute.top-0.left-0.bottom-0.right-0.w-100.z-none.opacity.opacity-hover-none.transition-duration-2s
           a(href="#").position-absolute.w-100.h-100.text-white.bg-primary.d-flex.fs-36px.justify-content-center.align-items-center.text-uppercase.text-decoration-none.font-weight-bold.z-1.opacity-none.rotateY-180deg.transition-duration-2s More


// TODO: z-index styles
  .z-none
    z-index 0
  .z-1
    z-index 1
  // TODO: opacity styles
  .opacity-none
    opacity 0
  .opacity
    opacity 1
  .opacity-hover-none:hover
    opacity 0
  .opacity-hover-img-none:hover > img
    opacity 0
  .opacity-hover-link:hover > a
    opacity 1
  // TODO: animation duration styles
  .transition-duration-2s
    transition-duration 2s
  // TODO: rotate styles
  .rotateY
    transform rotateY(0deg)
  .rotateY-180deg
    transform rotateY(180deg)
  .rotateY-hover-180deg:hover
    transform rotateY(180deg)
.top-0
    top 0
  .left-0
    left 0
  .right-0
    right 0
  .bottom-0
    bottom 0
  .text-white-hover-link:hover > a:hover
    color white


Все остальные стили взяты из бутстрапа.

Проблема в том, что при наведении на первый блок, на картинку, во время ее поворота на 180 градусов, который происходит 2 секунды, картинки следующих блоков теряют во время этого эффекта свою окружность, то есть меняются на квадраты. Как можно эту проблему устранить?

P.S.
делаю сайт, по методологии бутстрапа, это значит, что на один класс приходится одно свойство, например w-150px это соответственно width: 150px, w-xl-60px это width 60px для девайсов 1200+.

P.P.S.
Прошу, не говорить про методологию именования классов, я объяснил выше. Кто не может разобраться в коде (понимаю, классов очень много), прошу не говорить (код ни о чем и т.д.).

Мне нужно решение данной проблемы а не обсуждение того, как я верстаю, вы все равно этого не знаете, даже глядя на этот код.
  • Вопрос задан
  • 51 просмотр
4 комментария
Подписаться 1 Простой 4 комментария
Решения вопроса 1
And__Smi
@And__Smi Автор вопроса
Проблема решена:

такое происходило, потому что у картинок было position-absolute.

Убрав его, я конечно проблему не решил, поэтому перешел к ссылке, она была далеко внизу и потому пришлось ей добавить два класса:
position-absolute top-0.

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

Теперь всё супер, анимация работает, окружность не теряется, всем спасибо.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Gulp, handlebarsjs - изменение темы сайта на ghost cms
18 апр. 2024, в 10:31
8000 руб./за проект
Symfony, Vue - Сервис автоматизации бизнеса натяжных потолков
18 апр. 2024, в 10:29
700 руб./в час
Разработка Проксированной Точки Доступа из Raspberry pi 3b
18 апр. 2024, в 10:29
3000 руб./за проект
Ещё заказы