Wie erreicht man mit CSS reibungslose Übergänge für unscharfe Bilder beim Schweben?

CSS-Übergänge für verschwommene Bilder vereinfachen

Wenn Sie mit der CSS-Pseudoklasse :hover über ein Bild fahren, wenden Sie einen Unschärfefilter an Durch die Filtereigenschaft entsteht ein optisch ansprechender Effekt. Es wird jedoch häufig beobachtet, dass das Bild beim Entfernen der Maus abrupt in seinen Normalzustand zurückkehrt. Dieses Verhalten kann auf das Fehlen eines „Ease-Out“-Effekts während der Übergangsphase zurückgeführt werden.

Um dieses Problem zu lösen und einen reibungslosen Übergang in beide Richtungen sicherzustellen, ist es wichtig, die Übergangseigenschaften auf die anzuwenden tatsächliches Element und nicht nur für die :hover-Pseudoklasse. Dadurch kann der Übergang reibungslos erfolgen, wenn Sie mit der Maus über das Element fahren und es verlassen.

Beispiel:

Beachten Sie den folgenden Codeausschnitt:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

Dieses aktualisierte Beispiel zeigt, wie die Anwendung der Übergangseigenschaften auf die Klasse .img-blur anstelle der Pseudoklasse :hover einen Übergang ergibt, der in beide Richtungen funktioniert.

Zusätzliche Verbesserungen:

Eine weitere häufige Anforderung besteht darin, Text über das unscharfe Bild zu legen, wenn die Maus darüber fährt. Während dies mit JavaScript erreicht werden kann, bieten CSS-Methoden eine effizientere und einfachere Lösung. So geht's:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

Dieser Code führt ein .text-overlay-Element ein, das standardmäßig ausgeblendet ist. Wenn Sie mit der Maus über das Bild fahren, wird die Pseudoklasse :hover aktiviert, die die Überlagerung sichtbar macht und sie über dem unscharfen Bild ausrichtet. Dieser Ansatz bietet eine bessere Kontrolle über den Stil der Textüberlagerung.

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS reibungslose Übergänge für unscharfe Bilder beim Schweben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!