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

Question

[SanistRay]

Здраствуйте. При наведении на 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);
}

Comments

[ArtJH]

загрузи на codeopen или хостинг

Answer 1

[Ankhena]

Ну так вы классы сравните у первой и у остальных

Comments

[SanistRay]

Только написал и сразу понял свою ошибку, не внимателен. Но все же, спасибо за овтет)

Answer 2

[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>

Comments

[SanistRay]

Да уже заметил, благодарю