<div class="wrapper">
	<div class="m">
		<div class="inside">
		</div>
	</div>
	<div class="m x">
	</div>
</div>

* {
	transition: 3s all ease;
}

body {
	background-color: cornflowerblue;
}

.wrapper {
	width: 95vw;
	height: 93vh;
	border: 20px solid deeppink;
	display: flex;
	align-items: center;
	justify-content: center;
}

.m {
	height: 40vh;
	width: 50vw;
	border: 3px dotted deeppink;
	border-radius: 999px;
}

.m:hover {
	border: 100px solid black;
	height: 500px;
	width: 500px;
}

.x {
	border: indigo dashed;
}

.inside {
	border: 5px solid lemonchiffon;
	height: 50px;
	width: 50px;
	border-radius: 999px;
	background-color: lightgoldenrodyellow;
	position: relative;
	margin: auto;
	top: 100px;
}

.inside:hover {
	background-color: lightskyblue;
	top: 200px;
	cursor: pointer;
	height: 100px;
	width: 100px;
}