Zoom Bilder flüssig mit CSS

Ich habe ein Bild, das ich zoomen möchte, wenn der Benutzer seine Maus darüber bewegen. Dies geschieht derzeit nicht reibungslos.Zoom Bilder flüssig mit CSS

Beispiel:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Zoom</title> 
<style> 
.zoom:hover { zoom: 1.5; } 
</style> 
</head> 
<body> 
<p><img src="images/image.png" class="zoom"></p> 
</body> 
</html>

Quelle

2015-04-23 Nikita Smith

Verwenden Sie die Eigenschaft 'transition'. Wie auch immer, Zoom ist eine Nicht-Standard-Eigenschaft. – chatoo

Verwenden transform den Zoom glätten:

.zoom { 
transition: transform 1s; 
}

Aber Sie sollten auf scale statt Zoom (dank @val) ändern:

.zoom:hover { 
    transform: scale(2); 
}

I created a fiddle, nur für Sie.

Quelle

2015-04-23 06:57:41 tjati

Dies funktioniert nur, wenn der Zoom als eine Transformation eingestellt ist: Maßstab (1,5), nicht mit einem Zoom (1,5) – vals

einfach diesen CSS hinzufügen und sehen, wie es aussieht :)

.zoom{ -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transition:0.7s ease all; -webkit-transition:0.7s ease all; -moz-transition:0.7s ease all;} 

.zoom:hover{ -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);}

Quelle

2015-04-23 07:06:05

Um einen reibungslosen Übergang zu machen Sie Übergang Eigenschaft verwenden.

.zoom{ 
    transition: all .5s; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    -ms-transition: all .5s; 
} 

.zoom:hover { 
transform : scale(1.25); 
-moz-transform : scale(1.25); 
-webkit-transform : scale(1.25); 
-o-transform : scale(1.25); 
-ms-transform : scale(1.25); 
}

Quelle

2015-04-23 07:21:43

Zoom Bilder flüssig mit CSS

Antwort

Verwandte Themen