Bild bei Mouse-Over vergrößern

Effekte können sinnvoll ein - wenn es passt.

Wundern Sie sich nicht, wenn Bilder bei Mausberührung größer werden. Wenn Sie den nachfolgenden CSS-Code in den Head-Bereich eingetragen funktioniert das. Dieser Effekt kann gezielt auf Unterseiten, Bereiche oder sogar einzelne Bilder angewendet werden - sprechen Sie uns an!

  

Bildeffekt bei Mouse-Over

  

Kopieren Sie den nachfolgenden CSS-Code vorzugsweise an das Ende der Anweisungen - vor dem Style-Ende. Ob Sie es gezielt in einen Unterseiten-Head-Bereich oder in den globalen Head-Bereich(siehe Anleitung) kopieren, ist Ihre Entscheidung.

 

img:hover {
    transform: scale(1.5);
    transition: all 1s ease;
}
img {
    transform: scale(1.0;
    transition: all 1s ease;
}
/*]]>*/
</style>

 

In dem Moment, in dem Sie mit der Maus über ein Bild fahren, zieht die Einstellung img:hover und scale(1.5) bedeutet, dass das Bild gnadenlose 50% größer angezeigt wird.  Das können Sie natürlich ändern. Die Einstellung 1s steht für die Effektdauer und kann ebenfalls geändert werden.

In dem Moment, wo die Maus nicht mehr auf dem Bild positioniert ist, zieht die Einstellung img{... und das Bild wird innerhalb einer Sekunde(1s) wieder in Normalgröße angezeigt.

Sie möchten Ihre Website tunen - mit dem plusTool ist es ganz einfach.