/* .animation {
    position: relative;
    display: inline-block;
} */

.animation img {
    display: block;
    transition: filter 0.3s ease;
}

.animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0; 
    transition: opacity 0.3s ease;
    border-radius: inherit;
    pointer-events: none;
}

.animation:hover::before {
    opacity: 1; 
}

.animation2 img {
    display: block;
    transition: filter 0.3s ease; /* Анимация при наведении */
}

.animation2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Прозрачный серый цвет */
    opacity: 0; /* Изначально слой невидимый */
    transition: opacity 0.3s ease; /* Анимация при наведении */
    border-radius: 50%; /* Круглые углы */
    pointer-events: none;
}

.animation2:hover::before {
    opacity: 1; /* Слой становится видимым при наведении */
}

.animation3 {
    position: relative;
    display: inline-block;
    overflow: hidden; /* Обрезаем излишки серого слоя */
}

.animation3 img {
    display: block;
    transition: filter 0.3s ease; /* Анимация при наведении */
}

.animation3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%; /* Начальная позиция слоя */
    width: 60%; /* Ширина серого слоя, чтобы охватывать от 5% до 65% */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Прозрачный серый цвет */
    opacity: 0; /* Изначально слой невидимый */
    transition: opacity 0.3s ease, width 0.3s ease, left 0.3s ease; /* Анимация при наведении */
    border-radius: 50px; /* Более скругленные углы */
    pointer-events: none;
}

.animation3:hover::before {
    opacity: 1; /* Слой становится видимым при наведении */
    left: 5%; /* Позиция слоя при наведении */
    width: 60%; /* Ширина слоя при наведении */
}