Задать вопрос
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.
Прошу, не говорить про методологию именования классов, я объяснил выше. Кто не может разобраться в коде (понимаю, классов очень много), прошу не говорить (код ни о чем и т.д.).

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

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

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

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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Телеграм бот для автоматизации генерации текста с ChatGPT-o1
23 дек. 2024, в 14:26
5000 руб./за проект
Elevenlabs генерация голоса
23 дек. 2024, в 14:10
10000 руб./за проект
Добработать/переработать сайт на Modx Evolution (II)
23 дек. 2024, в 14:06
1000 руб./за проект
Ещё заказы