I found this website and I wondered how that circle effect is done? I have been looking in the source but couldn’t find anything. Any help or advise would be highly appreciated.
Thank you in advance
You need to learn about “inspect element”. That instantly reveals two divs—one inside the other—both with a large border radius. The outer has a thin border, the inner a slightly transparent background color.
Have another look via inspect element and see if you can reconstruct it. The HTML and CSS are very basic. 
1 Like
Hi Ralph. Thanx for the reply and tip, it was indeed mot that difficult, but I still can’t figure how the effect is done?
Perhaps this will make it easier to understand 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
body {
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #2C3CCE), color-stop(1, #475AF8) );
background-image: -o-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -moz-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -webkit-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -ms-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: linear-gradient(to bottom, #2C3CCE 0%, #475AF8 100%);
}
.circle {
border: 2px solid #9DD1F9;
width: 450px;
height: 450px;
border-radius:50%;
margin:auto;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
.circle-inner {
background:rgba(255, 255, 255, 0.7);
width: 380px;
height: 380px;
border-radius:50%;
padding: 20px;
margin: 15px auto;
}
.circle-inner h2 {
display:table-cell;
vertical-align:middle;
text-align:center;
padding:20px;
width:340px;
height:340px;
font-size:50px;
color:blue;
}
</style>
</head>
<body>
<div class="circle">
<div class="circle-inner">
<h2>This is the text in the middle of the circle</h2>
</div>
</div>
</body>
</html>
If that doesn’t make sense to you then shout and we’ll break it down further.
Hi Paul, thank you so much for the reply. This makes pretty much sense, But I still don’t see how the :hover effect can be realized?
There wasn’t a hover effect on the example I was looking at (the main circle on that page at the top) but I see down the page there are more circles of a slightly different design (under the Solutions heading) and these circles have a hover effect.
Is this the ones that you meant?
Here’s an example of the second one.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
body {
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #2C3CCE), color-stop(1, #475AF8) );
background-image: -o-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -moz-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -webkit-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -ms-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: linear-gradient(to bottom, #2C3CCE 0%, #475AF8 100%);
}
.circle {
display:block;
width: 450px;
height: 450px;
border-radius:50%;
margin:auto;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:rgba(255, 255, 255, 0.7);
}
.circle-inner {
width: 380px;
height: 380px;
padding: 20px;
margin: 15px auto;
position:relative;
z-index:3;
}
.circle-inner h2 {
display:table-cell;
vertical-align:middle;
text-align:center;
padding:20px;
width:340px;
height:340px;
font-size:50px;
color:blue;
}
.circle:after {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:20px;
height:20px;
margin:auto;
z-index:2;
border-radius:50%;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
transition:all 1s ease;
}
.circle:hover:after {
width:430px;
height:430px;
background:rgba(100,100,100, 0.3);
}
</style>
</head>
<body>
<a class="circle" href="#">
<div class="circle-inner">
<h2>This is the text in the middle of the circle</h2>
</div>
</a>
</body>
</html>
I didn’t look at how the original was done but the above is how I would do it.
Hi Paul, yes that are the ones I ment. Sorry for not beeing more clear 
That is in one word brilliant Paul. Last question. How would do get the overlay effect for the middle circle?
make the left and right one float? and the middle float: none?
They are all fixed width so just use display:inline-block instead of float and then use a negative right and left margin on the middle one to cause the overlap.
My example absolutely positioned the main circle for the demo but you can change it inline-block, remove the co-ordinates and then add position:relative for the stacking context.
Something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
height:100%;
margin:0;
padding:0
}
body {
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #2C3CCE), color-stop(1, #475AF8) );
background-image: -o-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -moz-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -webkit-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: -ms-linear-gradient(bottom, #2C3CCE 0%, #475AF8 100%);
background-image: linear-gradient(to bottom, #2C3CCE 0%, #475AF8 100%);
}
.circles{text-align:center;}
.circle {
display:inline-block;
width: 350px;
height: 350px;
border-radius:50%;
margin:auto;
position:relative;
text-decoration:none;
background:rgba(255, 255, 255, 0.7);
}
.circle2{margin:0 -30px;z-index:1}
.circle-inner {
width: 320px;
height: 320px;
margin: 15px auto;
position:relative;
z-index:3;
}
.circle-inner h2 {
display:table-cell;
vertical-align:middle;
text-align:center;
padding:20px;
width:280px;
height:280px;
font-size:30px;
color:blue;
}
.circle:after {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:20px;
height:20px;
margin:auto;
z-index:2;
border-radius:50%;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
transition:all 1s ease;
}
.circle:hover:after {
width:320px;
height:320px;
background:rgba(100,100,100, 0.3);
}
</style>
</head>
<body>
<div class="circles">
<a class="circle" href="#">
<div class="circle-inner">
<h2>This is the text in the middle of the circle</h2>
</div>
</a>
<a class="circle circle2" href="#">
<div class="circle-inner">
<h2>This is the text in the middle of the circle</h2>
</div>
</a>
<a class="circle" href="#">
<div class="circle-inner">
<h2>This is the text in the middle of the circle</h2>
</div>
</a>
</div>
</body>
</html>
1 Like
Hi Paul. Just one word, beautiful.
Thanks a lot
thinking it can be easily done in svg and smil
Why bother with svg when css alone is doing it so well and so easily?
2 Likes
You can simply use :after or :before pseudo-elements to apply outer circle to one element.
Here’s the sample code:
Define your outer circle’s distance from inner and apply to outer(:after in my example and it’s 30px) as padding. Then draw away the outer circle using padding pixels as minus from left and top.
These are only last 3 variables in my solution.
Yes, you show the right one. But i just want to mention only the circled element. Because whole code can be complicated for a newbie.
True
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.