Плавное масштабирование изображений с помощью CSS

У меня есть изображение, которое я хочу увеличить, если пользователи наведут на него курсор мыши. В настоящее время это не происходит гладко.

пример: 

<!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>
6
css css3 html html5

3 ответов

использовать transform чтобы сгладить зум:

.zoom {
 transition: transform 1s;
}

но вы должны изменить к scale вместо масштабирования (спасибо @val):

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

Я создал скрипку, только для вас.

9

просто добавьте этот css и посмотрите, как он выглядит:)

.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);}
2

для плавных переходов необходимо использовать свойство transition.

   .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);
}
2