SanistRay
@SanistRay

Почему первый div имеет отличные от последующих анимации, хотя классы те же?

Здраствуйте. При наведении на div-ы осуществляется затемнение и поворот через :hover. Но проблема в том что анимации при наведении на первый div и на 2-3 отличны друг от друга. Если наводить на первый - все нормально, но если на последующие то такое чуство что rotate и scale там 2х. Подскажите, пожалуйста, в чем может быть проблема?

<section class="jobs">
        <div class="container-fluid">
            <div class="jobs-wrapper">
                <div class="row jobs-title">
                    <h1 class="header-body-title">Тест <span class="header-body-title-2">заголовок</span> </h1>
                </div>
                <div class="jobs-cards row">
                    <div class="jobs-card">
                        <img src="img/jobs-1.png" alt="">
                    </div>
                    <div class="jobs-card">
                        <div class="jobs-card">
                            <img src="img/jobs-1.png" alt="">
                        </div>
                    </div>
                    <div class="jobs-card">
                        <div class="jobs-card">
                            <img src="img/jobs-1.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


.jobs-cards {
    position: relative;
    top: 300px;
    left: 100px;
}

.jobs-card {
    margin-left: 20px;
}

.jobs-card:hover {
    filter: brightness(50%);
    transition: 0.5s;
    transform: rotate(2deg) scale(1.1);
}
  • Вопрос задан
  • 45 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Ну так вы классы сравните у первой и у остальных
Ответ написан
@ArtJH
Потому что структуру посмотри. Ты 2 раза обернул в jobs-card

Вот так попробуй
<div class="jobs-cards row">
                    <div class="jobs-card">
                        <img src="img/jobs-1.png" alt="">
                    </div>
                    <div class="jobs-card">                 
                         <img src="img/jobs-1.png" alt="">                     
                    </div>
                    <div class="jobs-card">                        
                         <img src="img/jobs-1.png" alt="">                    
                    </div>
                </div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы