On gists

Transformace (transform) does not change flow

CSS CSS trick

index.html Raw #

	<div>
		<figure>
				<img src="http://picsum.photos/400/400?grayscale" alt="">
			<figcaption>
				Nakej popis
			</figcaption>
		</figure>
		
		
	</div>

index.css Raw #

div {
	outline: 1px solid red;
	overflow: hidden;
}

img {
	display: block;
	width: 100%;
	height: auto;
	transition: 500ms;
}

figure {
	margin: 0;
}

figcaption {
	background: coral;
	padding: 1.5rem;
}


div:hover img {
	scale: 0;
	rotate: 125deg;
	transform-origin: top left;
}

demo.txt Raw #

https://jsbin.com/pacizub/edit?html,css,output