Hi Guys,
I’m a PHP developer by trade but as side project I’m helping a friend update thier site.
I’m trying to recreate this image in CSS3 with some mouse over effects when each circle is hovered over.
I have mocked up the basic CSS needed for the circles, but I’m struggling to find any solution for the text to wrap nicely within…
Anyone have any ideas?
Much appreciated!
<style type="text/css" media="screen" id="circles">
.circle {
background-color: #FFF6BF;
-moz-border-radius:50%;
-webkit-border-radius: 50%;
-border-radius: 50%;
border:1px #000 solid;
position:relative;
margin:35.5px;
}
#forth {
width:350px;
height:350px;
}
#third{
width:275px;
height:275px;
background-color: #FEDFB1;
}
#second {
width:200px;
height:200px;
background-color:#fff6bb;
}
#first {
width:100px;
height:100px;
background-color: #ffffcc;
margin:50px;
}
</style>
and the mark up…
<div id="forth" class="outer circle">
<div id="third" class="circle inner">
<div id="second" class="circle inner ">
<div id="first" class="circle center">
Review Learning
</div>
</div>
</div>
</div>