using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

HTML

<div class='zoom-me'>Zoom Me</div>

CSS

.zoom-me {
	height:300px;
	width:300px;
	background:#000;
	color:#FFF;
	border-radius:10px;
	text-align:center;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
}
.zoom-me:hover {
	transition: all 0.3s;
	transform: scale(1.5);
}

Demo

Zoom Me
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹