CSS-Übergang - erleichtert, aber nicht verlangsamen?

Ich habe ein kleines problem bezüglich meiner Bilder, als hier gezeigt (http://jsfiddle.net/garethweaver/Y4Buy/1/).

CSS:

.img-blur:hover {
  -webkit-filter: blur(4px);
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
}

HTML:

<img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

Das Bild verwischt, wenn man die Maus bewegt, aber wenn ich meine Maus aus geht es direkt zurück zu normal, wie kann ich es machen das die Leichtigkeit aus der Unschärfe?

Auch, gibt es eine Möglichkeit, die text anzeigen, wenn der Mauszeiger über? Wenn der Benutzer mit der Maus über das Bild, ich will es verwischen und dann zeigen einige Texte, wie "Erfahren Sie Mehr". Ist dies auch möglich mit css?

Cheers

InformationsquelleAutor Gareth | 2014-03-12
  1. 35

    Hinzufügen, die Eigenschaften der transition, um das element selbst, anstatt die :hover pseudo-Klasse-version.

    Damit der übergang stattfinden wird, wenn die Maus auf und aus.

    Aktualisiert-Beispiel

    CSS:

    .img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

    HTML:

    <img src="http://i.imgur.com/Vp5StNs.png" class="img-blur" />

    Wenn Sie möchten, verschiedene übergänge Eigenschaften, wenn die Maus an/aus, siehe dieses Beispiel.

    • Die transition-Eigenschaft auf das element selbst wird stattfinden, wenn die Maus aus des Elements.

    • Den übergang auf die :hover pseudo-Klasse stattfinden wird, wenn die Maus auf das element:

    CSS:

    .img-blur {
    transition: all 0.35s ease-in-out;   /* Hover off */
}
.img-blur:hover {
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
    filter: blur(4px);
    transition: all 1s ease-in;         /* On hover */
}

    HTML:

    <img src="http://i.imgur.com/Vp5StNs.png" class="img-blur">

    Wenn Sie möchten, das hinzufügen von text auf schweben, werfen Sie einen Blick auf diese beiden letzten Antworten.

    • Genial, danke für den schnellen Kommentar, wissen Sie, wie Sie text hinzufügen, wenn es schwebte über?
    • Ich fügte hinzu, in ein paar links. Hoffentlich sind Sie hilfreich.
    • Sie scheinen nicht zu funktionieren, weil die anderen Klassen habe ich
    InformationsquelleAutor Josh Crozier
Schreibe einen Kommentar