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);
}
Zoom Me

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 800 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.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
"We're tight-fisted with property and money, yet think too little of wasting time, the one thing about which we should all be the toughest misers.โ€
Seneca