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

Other Items in css
Page Views

This page has been viewed 70 times.

Search Code
Search Code by entering your search text above.
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.

❤👩‍💻🕹