Wie erreicht man einen sanften Ease-Out-Effekt für CSS-Übergänge beim Hovern von Bildern?

CSS-Übergangsproblem: Ease-In, aber nicht Ease-Out

Diese Frage betrifft die Implementierung von CSS-Übergängen für Bilder. Wenn Sie mit der Maus über ein Bild fahren, verschwimmt das Bild gleichmäßig, aber wenn Sie mit der Maus fortfahren, kehrt es abrupt in seinen ursprünglichen Zustand zurück. Das gewünschte Verhalten besteht darin, dass das Bild aus dem Unschärfeeffekt verschwindet. Darüber hinaus untersucht die Frage die Möglichkeit, Text beim Hover nur mit CSS anzuzeigen.

Lösung für Ease-Out

Um den gewünschten Ease-Out-Effekt zu erzielen, ändern Sie die CSS-Übergangseinstellungen, indem Sie sie auf das Element selbst und nicht auf die Pseudoklasse :hover anwenden. Dadurch wird sichergestellt, dass der Übergang sowohl beim Ein- als auch Ausschalten des Mauszeigers erfolgt:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

Hinzufügen von Text beim Hover

Zum Anzeigen von Text beim Bewegen des Mauszeigers über ein Bild nur mit CSS , verwenden Sie das :after-Pseudoelement:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

Wenn Sie diese Anpassungen befolgen, wird das Bild aus dem Unschärfeeffekt verschwinden, wenn der Mauszeiger weggeht, und beim Schweben wird Text angezeigt.

Das obige ist der detaillierte Inhalt vonWie erreicht man einen sanften Ease-Out-Effekt für CSS-Übergänge beim Hovern von Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!