circle-demo

Demo for circle nav on website process

by Brent White

HTML

<div class="big-circle">
   <div id="small-circle"></div>
</div>

CSS

.big-circle {
    display: block;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    top:0;
    left:0;
    overflow: hidden;
    background-color: magenta;
}

#small-circle{
    position: relative;
    display: none;
    border-radius:50px;
    width:40px;
    height:40px;
    background-color: yellow;
}

.big-circle:hover #small-circle{
    display: block;
}