0t1 steckt noch in den Kinderschuhen.

Veröffentlicht in Web.

Card-Hover Effect

Sabine Braunwarth | .

Co-Autor(en): Hannah Willsch

Entdecke in unserem Tutorial den faszinierenden Card-Hover Effect – In unserem Beispiel erstellt der Code eine interaktive Galerieansicht mit Hover-Effekten, bei denen Karten vergrößert und Text sichtbar wird, wenn der Curser darüber schwebt.

HTML Grundgerüst

Die HTML-Grundstruktur besteht aus einer <!DOCTYPE>-Deklaration, einem <html>-Element mit der Sprachangabe lang="de", einem <head>-Abschnitt der Metainformationen enthält und auf externe Ressourcen wie Stylesheets und Schriftarten verweist.

<!DOCTYPE html>
<html lang="de" >
  <head>

    <!-- Infos über diese Webseite -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Card-Hover-Effect</title>

    <!-- Die Verbindung zum Stylesheet -->
    <link href="css/cardhoover.css" rel="stylesheet" />

    <!-- Schriftart -->  
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,700;1,400&family=Work+Sans&display=swap" 
    rel="stylesheet">

  </head>


Body

Innerhalb des <body>Tags gibt es drei verschiedene Karten-Variationen die den selben Aufbau haben. Jede Variation ist in einem container eingebettet.

<!-- Variation 1 -->
<!-- komplettes Element -->
    <div class="container1">

Dieser container enthält jeweils die CSS-Klassen card, image und content, die durch ein <div>-Element eindeutig definiert werden. Innerhalb dieser CSS-Klassen befindet sich ein Bild und der Text, wobei der Text in <h1>- und <p>-Elemente aufgeteilt ist.

<div class="card1">

        <!-- Bild -->
        <div class="image1"><img src="bilder/berg.png"</div>

        <!-- Text  -->
        <div class="content1">

          <h1>Jardim do Morro</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
            erat, sed diam voluptua. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet.
          </p>
        </div>
</div>

Die Einteilung in CSS-Klassen ist für die spätere Formatierung und Gestaltung per CSS notwendig.

CSS

Zentraler Stylesheet

Hinweis: Für eine Übersichtliche Formatierung und Gestaltung haben wir die unterschiedlichen Variationen auf verschiedene Stylesheets aufgeteilt und auf einem Zentralen Stylesheet durch die @import-Anweisung zusammengeführt.

@import url("allgemein.css");
@import url("variation1.css");
@import url("variation2.css");
@import url("variation3.css");


Allgemeiner Stylesheet

Der Allgemeine Stylesheet legt grundlegende Stilregeln für alle Elemente (*) der Webseite und spezifische Stile für das <body>-Element fest.

Die Regel für alle Elemente setzt den Außen- und Innenabstand auf Null, ändert das Box-Modell auf border-box und definiert durch das Element font-family die bevorzugte Schriftart.

* {
  /* Außenabstand */
  margin: 0;

  /* Innenabstand */
  padding: 0;

  box-sizing: border-box;
  font-family: "Work Sans", sans-serif;
}

Die Regeln für das <body>-Element stellen sicher, dass durch display: flex; das Flexbox-Layout aktiviert ist. Dadurch werden mithilfe von align-items: center; und justify-content: center; die Inhalte vertikal sowie horizontal zentriert. Des Weiteren werden die Hintergrundfarbe und die Mindesthöhe festgelegt.

body {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgb(255, 255, 255);
  min-height: 800px;
  }


Variation 1

Zunächst gestalten wir container1 . Dieser umfasst card1, image1 sowie content1. Dabei geben wir die Größe an, positionieren ihn relativ und richten ihn flexibel aus um Elemente horizontal mit justify-content:und vertikal mit align-items: zu zentrieren. flex-wrap und gap dienen dazu, die enthaltenen Elemente in einer Zeile anzuordnen und einen Abstand von 10 Pixeln zwischen ihnen zu schaffen.

/* CSS für oberstes Bild 
    -> Hover-Effekt nach rechts größer + Text */
    
/* alles */
.container1 {
  position: relative;
  width: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 30px;
}

Anschließend gestalten wir die “(Bild-)karte” .container1 .card1 damit gemeint ist die weiße Fläche auf welcher das Bild liegt.

Die Karten erhalten eine relative Positionposition: relative;, und bei uns einen weißen Hintergrund sowie leicht abgerundete Ecken durch border-radius: 5px; .

Zudem sind Karten als Flex-Container display: flex; flex-direction: column; konfiguriert was dafür sorgt, dass sie flexibel anzuordnen sind. Des weiteren hat card1 einen Schatten. Wir haben eine Transitionanimation für die Änderung der Breite über 500 Millisekunden definiert. Durch transition-property: width; wird festgelegt das die Animation nur die Breite des Elements betrifft.

/* Fläche "(Bild-)karte" */
.container1 .card1 {
  position: relative;

  width: 300px;
  height: 383px;
  background-color: white;
  margin: 10px;
  padding: 20px 15px;
  border-radius: 5px;

  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

  transition-duration: 500ms;
  transition-property: width;
}

Um nun unseren gewünschten Hover Effect zu erzielen schreiben wir hinter unsere class .container1 .card1 nun den Selektor :hover. Dieser sorgt dafür, dass wenn der Curser nun über die Karte fährt, sich diese auf die angegebene Breite verändert.

/* Hover-Effekt "(Bild-)karte"*/
.container1 .card1:hover {
  width: 700px;
}

container1 .card1 .image1 definiert den Bildbereich innerhalb der Karte, in dem die Bilder platziert werden.

/* Fläche in der das Bild ist */
.container1 .card1 .image1 {
  position: absolute;
  width: 250px;
  height: 333px;
  top: 25px;
  left: 25px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

.container1 .card1 .image1 img definiert, dass tatsächliche Bild innerhalb des Bildbereichs. Das Bild dabei wird so konfiguriert, dass es die volle Breite des Elternelements einnimmt.

/* tatsächliches Bild */
.container1 .card1 .image1 img {
  max-width: 100%;
  border-radius: 5px;
  height: 100%;
}

.container1 .card1 .content1 bezieht sich auf den Bereich innerhalb der Karte in dem Textinhalt platziert wird. Dabei wird der Text positioniert und so gestaltet, dass er zunächst nicht zu sehen ist. Dazu verwenden wir die Eigenschaft visibility.

/* Textfeld */
.container1 .card1 .content1 {
  position: absolute;
  top: 13%;
  left: 85%;

  color: #111;
  text-align: left;
  padding: 10px 15px;
  width: 350px;
  max-height: 250px;

  visibility: hidden;
}

Um durch den Hover Effect den Text sichtbar zu machen, gestalten wir container1 .card1:hover .content1, also den Textbereich innerhalb der Karten, nun so das der Text sichtbar ist, wenn die Karte gehovert wird.

/* Hover-Effekt Textfeld */
.container1 .card1:hover .content1 {
  position: absolute;

  /* Höhe des Textes */
  top: 7%;

  left: 100%;
  margin-left: 30px;
  transition-delay: 0.2s;

  visibility: visible;
}

content1 h1 und content1 p definieren Stile für Überschriften und Textabschnitte im Textbereich.

.content1 h1 {
  font-size: 50px;
  font-weight: 500;

  /* Abstand h1 und p */
  margin-bottom: 7%;
}

.content1 p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}


Variation 2

Damit sollte der gewünschte Hover-Effekt in Ihrem mittleren Bildrahmen erreicht werden.

Um den Code von Variation 1 in den von Variation 2 zu ändern machen wir folgendes:

Wir beginnen damit die Klassennamen zu container2, card2, image2 und content2 zu ändern um sicherzustellen, dass die neuen Stile auf die richtigen Elemente angewendet werden.

Daraufhin wird bei .container2 .card2 .image2 img filter: grayscale(100%) hinzugefügt, sodass das Bild schwarz weiß ist.

/* tatsächliches Bild */
.container2 .card2 .image2 img {
  filter: grayscale(100%);
  max-width: 100%;
  border-radius: 5px;
  height: 100%;
}

Bei .container2 .card2:hover .image2 img sind alle Angaben dieselben nur filter: grayscale(0%) wird auf 0% gesetzt wodurch das Bild nun farbig wird, wenn der Curser über dieses fährt.


Variation 3

Um nun Variation 3 zu gestalten dient Variation 1 wieder als Grundgerüst.

Zuerst müssen wir die Klassennamen wieder zu container3, card3, image3 und content3 ändern. Und den Hover Effect von Variation 1 entfernen.

Als nächstes ändern wir bei .content3 Höhe und Breite auf 100% dies sorgt dafür, dass das Textfeld das gesamte übergeordnete Element ausfüllt. Außerdem ändern wir top auf den Wert null, da die Box .content3 bündig sein soll. Im Anschluss verändern wir right auf den Wert -110%, sodass das Feld ohne hovern außerhalb von card3 platziert ist.

Um .content3 zu sehen muss das Element visibility entfernt werden.

Im Anschluss muss dem Hintergrund eine Farbe gegeben werden und mithilfe von backdrop-filter: blur(5px); der Verschwommenheitsgrad eingestellt werden.

.content3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: -110%;

  background-color: rgba(0, 0, 0, 0.179);
  backdrop-filter: blur(5px);
}

.container3 .card3:hover .content3 Nun wird der Hover Effect wieder erstellt. Beim Hovern über die Karte wird das Textfeld von seiner anfänglichen Position, rechts außerhalb des Sichtfeldes (right: -110%;) , nach links verschoben (right: 0;) und wird somit sichtbar.

.container3 .card3:hover .content3 {
  right: 0;
}

Um content3 auszublenden wenn kein hovern vorliegt muss das Element overflow: hidden; hinzugefügt werden. Sodass content3 nur innerhalb des Bereiches von card3 angezeigt wird und nicht über diesen Bereich hinausragt.

.container3 .card3 {
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 383px;
  background-color: white;
  margin: 10px;
  padding: 20px 15px;
  border-radius: 5px;

  display: flex;
  flex-direction: column;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

  transition-duration: 500ms;
}

Download

Hier könnt ihr den Quellcode zum Card-Hover Effect als Zip-Datei herunterladen.

Quellen

Auch interessant

    © 0t1

    Cookies

    0t1 mag keine Kekse (und kein Tracking). Wir verwenden lediglich notwendige Cookies für essentielle Funktionen.

    Wir verwenden Schriftarten von Adobe Fonts. Dafür stellt dein Browser eine Verbindung zu den Servern von Adobe in den USA her. Wenn du unsere Seite nutzen möchtest, musst du dich damit einverstanden erklären.

    Weitere Informationen in unserer Datenschutzerklärung.