<div class="image-zoom">
	<span>Hover me</span>
</div>

body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background-color: #222228;
	overflow: hidden;
}

.image-zoom {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 55vw;
	height: 45vh;
	background-image: url(https://picsum.photos/id/1025/4951/3301);
	background-size: 65vmax;
	background-position: center 5%;
	transition: background-size 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	background-repeat: no-repeat;
	
	span {
		color: #eee;
		font-family: sans-serif;
		font-weight: bold;
		font-size: 2em;
		text-shadow: 0 0 5px rgba(0,0,0,0.7);
		opacity: 1;
		transition: opacity 0.2s ease-out;
	}
	
	&:hover {
		transition: background-size 3s cubic-bezier(0.455, 0.030, 0.515, 0.955);
		background-size: 85vmax;
		
		span {
			opacity: 0;
		}
	}
}