Как использовать эффект увеличения изображения в CSS
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}
Open Owl
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}/* Point-zoom Container */.point-img-zoom img { transform-origin: 65% 75%; transition: transform 1s, filter .5s ease-out;}/* The Transformation */.point-img-zoom:hover img { transform: scale(5);}/*HTML*/
<img src="https://c1.staticflickr.com/1/628/22240194016_50afaeb84d_k.jpg" class="full zoom" alt="" />
/*CSS*/
body *,
html * {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body {
overflow: hidden;
}
.full {
position: absolute;
width: 100%;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
}
.zoom {
animation: scale 40s linear infinite;
}
@keyframes scale {
50% {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
}
}.parent {
width: 400px;
height: 300px;
}
.child {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-image: url("images/city.jpg");
background-position: center;
background-size: cover;
}