Хитрость с изображением в html

Question

Есть у меня фото котика.

Мне нужно, чтобы при наведении на него мышью фото как бы приближалось, при этом сохраняя старые размеры. То есть, было оно скажем 700 на 500, так 700 на 500 и осталось, изменилось именно внутреннее содержание. Есть какое нибудь решение? Вот так должно получится(не получилось сохранить размер как надо, но по сути надо при наведении фото обрезать и растянуть до размеров старого, еще и плавно это сделать)

Answer 1

.container {
	display: flex;
	flex-wrap: wrap;
}

.wrapper {
	width: 300px;
	height: 150px;
	overflow: hidden;
	margin: 10px;
}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s;
}

img:hover {
	transform: scale(1.5);
}

.top img { transform-origin: top; }
.right img { transform-origin: right; }
.bottom img { transform-origin: bottom; }
.left img { transform-origin: left; }

.collapse { transition: transform 0.2s; }
.collapse:hover { transform: scale(0.9); }

<div class="container">
	<div class="wrapper">
		<img src="https://i.stack.imgur.com/FQpbZ.jpg" alt="">
	</div>
	<div class="wrapper top">
		<img src="https://i.stack.imgur.com/FQpbZ.jpg" alt="">
	</div>
	<div class="wrapper right">
		<img src="https://i.stack.imgur.com/FQpbZ.jpg" alt="">
	</div>
	<div class="wrapper bottom">
		<img src="https://i.stack.imgur.com/FQpbZ.jpg" alt="">
	</div>
	<div class="wrapper left">
		<img src="https://i.stack.imgur.com/FQpbZ.jpg" alt="">
	</div>
	
	<div class="wrapper collapse">
		<img src="https://i.stack.imgur.com/FQpbZ.jpg" alt="">
	</div>
</div>

БЛОГ НА HUSL

Хитрость с изображением в html

Ответы (1 шт):