I have managed to figure out most aspects of these circles except for how to arrange them side by side. Currently, they are stacked on top of each other. I have successfully determined the colors, fonts, text positions, and other details with some assistance. However, arranging the circles side by side instead of top/bottom is proving to be a challenge. My end goal is to have 4-5 circles displayed next to each other.
.ca-menu{
padding: 0;
margin: 20px auto;
width: 500px;
}
.ca-menu li{
width: 230px;
height: 230px;
border: 10px solid #f6f6f6;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-right: 4px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
border-radius: 125px;
transition: all 400ms linear;
}
.ca-menu li:hover{
background: #f7f7f7;
border-color: #fff;
transform: rotate(360deg);
}
.ca-menu li:hover .ca-icon{
color: #555;
font-size: 60px;
}
.ca-menu li:hover .ca-main{
display: none;
}
.ca-menu li:hover .ca-sub{
opacity: 0.8;
}<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon"></span>
<div class="ca-content">
<h2 class="ca-main">testing</h2>
<h3 class="ca-sub">testing2</h3>
</div>
</a>
</li>
</ul>
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon"></span>
<div class="ca-content">
<h2 class="ca-main">testing3</h2>
<h3 class="ca-sub">testing4</h3>
</div>
</a>
</li>
</ul>