<!DOCTYPE html>
 <html>
   <head>
     <link href="stylesheet.css" type="text/css" rel="stylesheet">
   </head>
   <body>
	<div id="square1">
      <div id="square2">
        <div id="square3">
          <h1>Target</h1>
          </div>
        </div>
      </div>
   
   </body>
 </html>
/*Please include index.css in HTML code for using this.*/

div {
    display: inline-block;
}

#square1 {
background-color: red;
width: 800px;
height: 800px;
}

#square2 {
width: 600px;
height: 600px;
margin: 100px;
background-color: green;
}

#square3 {
padding: 200px;
width: 0px;
height: 0px;
margin: 100px;
background-color: yellow;
text-align: center;
}

div:hover {
  border-radius: 70%; 
  animation-duration: 0.5s; /* 3 seconds */
  animation-timing-function: linear;
}

Browse more Codebits