Box-Hover Tutorial

1. Box – Hover Zoom Effekt

Step 1

<wrapper id="boxone">
        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80">
        <h2>Susi</h2>
        <p>übel Nett</p>
    </wrapper>

In HTML erstellen wir einen <wrapper> mit der id #boxone. Er enthält ein <img> und Text.

Step 2

wrapper {
    height: 400px;
    width: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
}

Jede der Boxen basiert auf einem <wrapper>. Dieser wird wie hier beschrieben gestylt. overflow: hidden sorgt dafür das objekte die auserhalb des <wrappers> sind nicht angezeigt werden.

Step 3

#boxone img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: 1s;
    display: block;
}

Zuerst wird das <img> definiert, mit width und height wird das Bild auf die Größe des <wrapper> angepasst. Danach wird mit objekt-fit sichergestellt, dass das Bild die Box proportional füllt. transform: scale(1) legt den Ausgangszustand der Bildgröße fest. Durch transistion wird dann die Dauer des erscheinen durch den Hover Effekt definiert.

Step 4

#boxone:hover img {
    transform: scale(1.2);
    filter: grayscale(100);
}

Mit der Pseudoklasse :hover wird der Hoverzustand des Elements gestlyt.In diesem Fall, erhält <img> durchs hovern über #boxone die Eigenschaft transform: scale(1.2). Dadurch wird die Größe im Ausgangszustand mit dem Faktor 1.2 multipliziert. Das Bild wird größer. Mit der Eigenschaft filter: greyscale(100) wird das Bild Schwarz-Weiß. Dabei regelt der Wert in der Klammer die Intensität des Effekts.

Step 5

#boxone h2, #boxone p {
    transition: 1s;
    opacity: 0;
    position: absolute;
    bottom: 2rem;
    left: 1rem;
}

Dann geht es an das Stylen des Texts. Auch hier wird mit transition die Erscheinungsdauer des Hovers bestimmt. Durch opacity: 0 ist der Text erstmal nicht sichtbar. bottom und left Positioniert den Textes im <wrapper>.

Step 6

#boxone:hover h2, #boxone:hover p {
    opacity: 1;
}

Zuletzt wird dann der Hover Zustand für den Text gestylt. Die :hover Klasse verändert den opacity Wert des Textes auf 1 und lässt ihn somit erscheinen.

2. – Hover Slide Effekt

Step 1

</wrapper>
    <wrapper id="boxtwo">
        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80">
        <div id="overlay">
            <h2>Susi</h2>
            <p>übel Nett</p>
        </div>
    </wrapper>

Auch hier wird ein <img> in den <wrapper> gelegt. Außerdem ein <div> in dem sich Text befindet. Dieses wird später das Bild überlagern.

Step 2

#overlay {
    width: 100%;
    height: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:#FF3344 ;
    overflow: hidden;
    transition: .5s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

Mit den CSS Einstellungen wird das <div> genau über dem <img> positioniert. Die Eigenschaft height = 0% sorgt dafür das im "nicht gehoverten" Zustand das <div> nicht sichtbar ist. Durch die Eigenschaften bottom, left und right wir die Richtung definiert in die sich das <div> schiebt. Dabei ist die nicht definierte Seite der Endpunkt und die gegenüberliegende Seite der Startpunkt für den Slide-Effekts. Mit transition wird die Übergangsdauer festgelegt. Durch display: flex; und die nachfolgenden Eigenschaften wird der Text mittig im <div> positioniert.

Step 3

wrapper:hover #overlay {
    height: 100%;
}

Dann wird der Hover Effekt gestylt. Dabei ist wichtig das sich die Pseudoklasse :hover auf den wrapper bezieht und nicht das auf <div>, da dieses keine Höhe hat und somit nicht gehovert werden kann. Durch das Ändern von height von 0% auf 100% entsteht der Eindruck, das <div> würde sich über das <img> schieben.

Varriationsmöglichkeiten

Durch das Ändern der height auf beispielsweise 50% erscheint das <div> und nur zur Hälfte. Somit bleibt das <img> im Hintergrund weiterhin sichtbar.

Wenn man anstatt left und right, bottom und top mit 0 definiert und dazu nur eine der senkrechten Seiten, kann man durch das Ändern auf width = 100 den Slide Effekt auch seitlich hereinkommen lassen.

3. Box – Hover Flip Effekt

Step 1

<wrapper id="boxthree">
        <div class="box-inner">
            <div class="box-front">
                <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80">
            </div>
            <div class="box-back">
                <h2>Susi</h2>
                <p>übel Nett</p>
            </div>
          </div>
    </wrapper>

Im Wrapper befindet sich das Übergeordnete <div> .box-inner, dieses setzt den Rahmen für die Rotation der Box. box-inner hat zwei Child Elememnte box-front in dem das <img> liegt und box-back in dem sich der Text befindet.

Step 2

#boxthree {
    perspective: 1000px;
    }

Der <wrapper> der Box erhält die Eigenschaft perspective: 1000px. Dadurch wird der Abstand zur Ebene z=0 definiert und verleiht der Box beim drehen perspektive.

Step 3

.box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .5s;
    transform-style: preserve-3d;
  }

Durch width und height 100% wird sichergestellt das box-inner die komplette Fläche des <wrapper> ausfüllt. Mit transition wird die Dauer des Hover Effekts definiert. Dann werden mit transform-style: preserve-3d die Child Elemente in den Dreidimensionalen Raum positioniert.

Step 4

.box-front, .box-back {
    position: absolute;
    width: 100%;
    height: 100% 
    backface-visibility: hidden;
  }

Dann wird die Vorder- und Rückseite gestaltet, durch position: absolute wird die Position aus dem Flow genommen. Mit width und height 100% füllen die Elemente box-inner komplett aus. Durch backface-visibility: hidden wird dafür gesorgt, dass die Rückseite nicht sichtbar ist.

Step 5

.box-back {
        background-color: #FF3344 ;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transform: rotateY(180deg);
    }

.box-back kann beliebig gestaltet werden, das wichtige für den Effekt ist der transform: rotateY(180deg) dieser sorgt dafür das .box-back die nicht sichtbare Seite ist.

Step 6

.box-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

Durch width und height 100% wird dafür gesorgt, dass das Bild die komplette Box ausfüllt. Mit object-fit: cover füllt das Bild den Rahmen aus.

Step 7

#boxthree:hover .box-inner {
    transform: rotateY(180deg);
  }

Abschließend gibt man dem wrapper die Pseudoklasse :hover und definiert damit den Effekt für box-inner. Durch transform: rotateY(180deg) dreht sich box-inner mit seinen beiden Child Elementen um 180°.

Download Code