Circle Hover / expand boxes

dabblet.css

/**
 * Circle Hover / expand boxes
 */

ul {list-style: none; margin:50px; padding: 0;}
li {height: 200px; display: block; width: 200px; float: left; text-align: center; 
background-color: #eee; margin-left: -20px;
border-radius: 50%}

li:nth-child(1) {background-color: #ddd;}
li:nth-child(3) {background-color: #ccc;}

li:hover{
        transition: all 350ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
        transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
 transform: scale(1.3); background-color: #bbb;}

dabblet.html

<ul>
<li>1</l1>
<li>2</li>
<li>3</li>
</ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}