Derzeit funktioniert dieses Beispiel nur mit dem Chrome, Opera und Edge Browser. Ein Update für Firefox werden wir demnächst veröffentlichen.

Erste Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Hier Klicken

Zweite Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Hier Klicken

Dritte Karte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Hier Klicken

Rotating Background Card Layout CSS

				
					    selector{
        --first-color: #5ddcff;
        --second-color: #3c67e3;
        --third-color: #4e00c2;
    }
    @property --rotate {
      syntax: "<angle>";
      initial-value: 132deg;
      inherits: false;
    }
    selector::before, selector::after{
        opacity: 0;
        content: "";
        transition: all 0.5s ease-in-out;
    }
    selector:hover::before, selector:hover::after{
        position: absolute;
        z-index: -1;
        background-image: linear-gradient(
        var(--rotate)
        , var(--first-color), var(--second-color) 43%, var(--third-color));
        animation: spin 2.5s linear infinite;
        opacity: 1;
    }
    selector:hover::before {
      width: 104%;
      height: 104%;
      border-radius: 8px;
      top: -2%;
      left: -2%;
    }
    selector:hover::after {
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      transform: scale(0.9);
      filter: blur(70px);
    }
    @keyframes spin {
      0% {
        --rotate: 0deg;
      }
      100% {
        --rotate: 360deg;
      }
    }