Circle

by mmarcon

HTML

<section class="circle">
    <div class="center"></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>

CSS

section.circle {
    width: 120px;
    height: 120px;
    border-radius: 60px;
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px auto;
}

section.circle:hover {
    -webkit-transform: scale(1.5);
}

section.circle:hover .center {
    -webkit-transform: scale(0.67);
}

section.circle .center {
    width: 90px;
    height: 90px;
    border-radius: 45px;
    background: #4797cf;
    box-shadow: 0 -1px 0 #326990;
    margin: 15px;
}