← Zur D/7 Designbibliothek

12 Hover-Effekte für Websites, die 2027 noch gut aussehen.

Hover-Effekte sollten nicht einfach nur Bewegung machen. Sie können zeigen, was klickbar ist, Bilder interessanter machen oder einer Karte genau im richtigen Moment etwas mehr Aufmerksamkeit geben.

Hier finden Sie zwölf Varianten aus typischen Website-Situationen: Referenzen, Leistungen, Navigation, Links und Relaunch-Beispiele. Gefällt Ihnen ein Effekt, setzen Sie ihn auf Ihren D/7 Merkzettel. Wenn Sie selbst bauen, können Sie HTML und CSS direkt übernehmen.

D/7 H01

Sanfter Bildzoom

Gut für: Referenzen · Portfolio · Projektbilder

Projekt ansehen →

HTML & CSS für H01

HTML

<a href="#" class="d7-hover-h01">
  <div class="d7-hover-h01__image"></div>

  <div class="d7-hover-h01__copy">
    <strong>Projekt ansehen</strong>
    <span>→</span>
  </div>
</a>

CSS

.d7-hover-h01__image {
  transition: transform .45s ease;
}

.d7-hover-h01:hover .d7-hover-h01__image {
  transform: scale(1.055);
}

D/7 H02

Von ruhig zu Farbe

Gut für: Fotografie · Teams · Referenzen

Mehr Persönlichkeit

HTML & CSS für H02

HTML

<div class="d7-hover-h02">
  <div class="d7-hover-h02__image"></div>

  <div class="d7-hover-h02__copy">
    <strong>Mehr Persönlichkeit</strong>
  </div>
</div>

CSS

.d7-hover-h02__image {
  filter: grayscale(1) saturate(.65);
  transition: filter .45s ease;
}

.d7-hover-h02:hover .d7-hover-h02__image {
  filter: grayscale(0) saturate(1);
}

D/7 H03

Karte hebt sich an

Gut für: Leistungen · Angebote · Übersichten

Website-Relaunch

Wenn die bestehende Seite nicht mehr zur Firma passt.

Mehr erfahren →

HTML & CSS für H03

HTML

<a href="#" class="d7-hover-h03">
  <strong>Website-Relaunch</strong>
  <p>Wenn die bestehende Seite nicht mehr zur Firma passt.</p>
  <span>Mehr erfahren →</span>
</a>

CSS

.d7-hover-h03 {
  transition:
    transform .28s ease,
    box-shadow .28s ease;
}

.d7-hover-h03:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(23,32,51,.10);
}

D/7 H04

Kontur wird aktiv

Gut für: Services · Preise · auswählbare Karten

Website-Betreuung

Für Änderungen, Pflege und alles, was später anfällt.

Details ansehen →

HTML & CSS für H04

HTML

<a href="#" class="d7-hover-h04">
  <strong>Website-Betreuung</strong>
  <p>Für Änderungen, Pflege und alles, was später anfällt.</p>
  <span>Details ansehen →</span>
</a>

CSS

.d7-hover-h04 {
  border: 1px solid #dfe4ed;
  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.d7-hover-h04:hover {
  border-color: #4566d9;
  box-shadow: 0 0 0 3px rgba(69,102,217,.06);
}

D/7 H05

Pfeil kommt dazu

Gut für: Textlinks · Referenzen · Navigation

Referenzen ansehen

HTML & CSS für H05

HTML

<a href="#" class="d7-hover-h05">
  <span>Referenzen ansehen</span>
  <span class="d7-hover-h05__arrow">→</span>
</a>

CSS

.d7-hover-h05__arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.d7-hover-h05:hover .d7-hover-h05__arrow {
  opacity: 1;
  transform: translateX(0);
}

D/7 H06

Bild und Text reagieren getrennt

Gut für: Projekte · Referenzen · Magazin-Karten

Projekt ansehen →

HTML & CSS für H06

HTML

<a href="#" class="d7-hover-h06">
  <div class="d7-hover-h06__media"></div>

  <div class="d7-hover-h06__copy">
    <strong>Projekt ansehen</strong>
    <span>→</span>
  </div>
</a>

CSS

.d7-hover-h06__media {
  transition: transform .42s ease;
}

.d7-hover-h06__copy {
  transition: transform .3s ease;
}

.d7-hover-h06:hover .d7-hover-h06__media {
  transform: scale(1.045);
}

.d7-hover-h06:hover .d7-hover-h06__copy {
  transform: translateX(5px);
}

D/7 H07

Farbfläche übernimmt

Gut für: Leistungen · Teaser · wichtige Einstiege

Website-Check Website prüfen lassen →

HTML & CSS für H07

HTML

<a href="#" class="d7-hover-h07">
  <span class="d7-hover-h07__fill"></span>

  <div class="d7-hover-h07__content">
    <strong>Website-Check</strong>
    <span>Website prüfen lassen →</span>
  </div>
</a>

CSS

.d7-hover-h07__fill {
  position: absolute;
  inset: 0;
  background: #4566d9;
  transform: translateY(102%);
  transition: transform .4s ease;
}

.d7-hover-h07:hover .d7-hover-h07__fill {
  transform: translateY(0);
}

D/7 H08

Linie wächst mit

Gut für: Hauptnavigation · Textlinks · Footer

HTML & CSS für H08

HTML

<nav class="d7-hover-h08">
  <a href="#">Webdesign</a>
  <a href="#">Referenzen</a>
  <a href="#">Kontakt</a>
</nav>

CSS

.d7-hover-h08 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: #4566d9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.d7-hover-h08 a:hover::after {
  transform: scaleX(1);
}

D/7 H09

Icon reagiert

Gut für: externe Links · Standorte · Download-Karten

Standort ansehen

Ein kleiner Hinweis darauf, dass es nach außen weitergeht.

HTML & CSS für H09

HTML

<a href="#" class="d7-hover-h09">
  <span class="d7-hover-h09__icon">↗</span>
  <strong>Standort ansehen</strong>
  <p>Ein kleiner Hinweis darauf, dass es nach außen weitergeht.</p>
</a>

CSS

.d7-hover-h09__icon {
  transition: transform .3s ease;
}

.d7-hover-h09:hover .d7-hover-h09__icon {
  transform: rotate(45deg);
}

D/7 H10

Hintergrund wechselt

Gut für: Leistungen · Themenkarten · FAQ-Teaser

SEO & Google

Wenn Ihre Website nicht nur gut aussehen, sondern auch gefunden werden soll.

Mehr erfahren →

HTML & CSS für H10

HTML

<a href="#" class="d7-hover-h10">
  <strong>SEO & Google</strong>
  <p>Wenn Ihre Website nicht nur gut aussehen, sondern auch gefunden werden soll.</p>
  <span>Mehr erfahren →</span>
</a>

CSS

.d7-hover-h10 {
  background: #fff;
  transition:
    background .3s ease,
    transform .3s ease;
}

.d7-hover-h10:hover {
  background: #e9edff;
  transform: translateY(-2px);
}

D/7 H11

Text erscheint auf dem Bild

Gut für: Referenzen · Projekte · Teamfotos

Projekt ansehen Mehr erfahren →

HTML & CSS für H11

HTML

<a href="#" class="d7-hover-h11">
  <div class="d7-hover-h11__overlay">
    <strong>Projekt ansehen</strong>
    <span>Mehr erfahren →</span>
  </div>
</a>

CSS

.d7-hover-h11::after {
  opacity: 0;
  transition: opacity .35s ease;
}

.d7-hover-h11__overlay {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .35s ease,
    transform .35s ease;
}

.d7-hover-h11:hover::after,
.d7-hover-h11:hover .d7-hover-h11__overlay {
  opacity: 1;
}

.d7-hover-h11:hover .d7-hover-h11__overlay {
  transform: translateY(0);
}

D/7 H12

Vorher wird nachher

Gut für: Relaunch · Redesign · Vorher-Nachher-Beispiele

Vorher

Nachher

HTML & CSS für H12

HTML

<div class="d7-hover-h12">
  <div class="d7-hover-h12__old">
    <span>Vorher</span>
  </div>

  <div class="d7-hover-h12__new">
    <span>Nachher</span>
  </div>

  <div class="d7-hover-h12__divider"></div>
</div>

CSS

.d7-hover-h12__new {
  width: 50%;
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}

.d7-hover-h12__divider {
  left: 50%;
  transition: left .5s cubic-bezier(.2,.7,.2,1);
}

.d7-hover-h12:hover .d7-hover-h12__new {
  width: 72%;
}

.d7-hover-h12:hover .d7-hover-h12__divider {
  left: 72%;
}

D/7 Designbibliothek