1.zoom50 {
2 -moz-transform: scale(0.5);
3 -webkit-transform: scale(0.5);
4 -o-transform: scale(0.5);
5 -ms-transform: scale(0.5);
6 transform: scale(0.5);
7}
1/*Zoom on hover*/
2
3<style>
4.zoom {
5 padding: 50px;
6 background-color: green;
7 transition: transform .2s; /* Animation */
8 width: 200px;
9 height: 200px;
10 margin: 0 auto;
11}
12
13.zoom:hover {
14 transform: scale(1.5); /* (150% zoom)*/
15}
16</style>
17
18<div class="zoom"></div>
19
20/*credits: w3schools.com */
1div.image {
2 width: 300px;
3 height: 200px;
4 overflow: hidden;
5}
6div.image img {
7 width: 100%;
8 height: auto;
9 /* SCALE */
10 -webkit-transform: scale(1);
11 -moz-transform: scale(1);
12 -ms-transform: scale(1);
13 -o-transform: scale(1);
14 transform: scale(1);
15 /* VERZÖGERUNG */
16 -webkit-transition: all 0.3s linear;
17 -moz-transition: all 0.3s linear;
18 -ms-transition: all 0.3s linear;
19 -o-transition: all 0.3s linear;
20 transition: all 0.3s linear;
21}
22div.image img:hover {
23 -webkit-transform: scale(1.2);
24 -moz-transform: scale(1.2);
25 -ms-transform: scale(1.2);
26 -o-transform: scale(1.2);
27 transform: scale(1.2);
28}
1.zoom:hover {
2 transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
3}