+ (deprecated) Spinning anim

Вместо текста может быть видео или картинка.

Шаг 1:

Каждая картинка добавляется так:

    <div class="spinning">
        <div id="first" class="rotating">
            <img id="img1"
                src="example.png"
                class="rotating-image" alt="" style="rotate: 0deg;">
            <div id="item1" class="text-window" style="rotate: 0deg;">Text to appear on hover</div>
            </div>
    </div>

Шаг 2:

Допустим у вас три картинки, нужно установить им задержку анимации чтобы они не стартовали с одной точки, если длительность анимации стоит на 30 секунд, то 30 / 3 (duration / n) получаем 10, выставляем с шагом в -10:

    .spinning:nth-child(1) {
        animation-delay: -10s;
    }

    .spinning:nth-child(2) {
        animation-delay: -20s;
    }

    .spinning:nth-child(3) {
        animation-delay: -30s;
    }

Шаг 3:

У каждой следующей картинки меняем id картинки, контейнера с текстом и контейнера в котором они оба. Плюс меняем начальный угол поворота для картинки и текста. Чтобы узнать какой ставить 360/кол-во картинок, в данном случае 120 градусов

Вторая картинка

        <div class="spinning">
            <div id="second" class="rotating">
                <img id="img2"
                    src="example.png"
                    class="rotating-image" alt="" style="rotate: 120deg;">
                <div id="item2" class="text-window" style="rotate: 120deg;">Text to appear on hover</div>
            </div>
        </div>

Третья картинка Тут уже угол будет 240

        <div class="spinning">
            <div id="third" class="rotating">
                <img id="img3"
                    src="example.png"
                    class="rotating-image" alt="" style="rotate: 240deg;">
                <div id="item3" class="text-window" style="rotate: 240deg;">Text to appear on hover</div>
            </div>
        </div>

Шаг: 4

Делаем так чтобы при наведении на контейнер с изображением оно становилось прозрачным

    #first:hover #img1 {
        opacity: 0.25;
    }

    #second:hover #img2 {
        opacity: 0.25;
    }

    #third:hover #img3 {
        opacity: 0.25;
    }

Выводим текст когда наводим мышкой на картинку

    #first:hover #item1 {
        display: block;
        rotate: inherit;
    }

    #second:hover #item2 {
        display: block;
        rotate: inherit;
    }

    #third:hover #item3 {
        display: block;
        rotate: inherit;
    }

Кол-во этих блоков зависит от кол-ва картинок