CSS pulsating dots with text inside them - html

Question

I'm trying to add text inside a pulsating dot.
Here's my current HTML (data inside h4 and p tags is dynamic)
<div class="pulsating-circle">
<h4>two lines title</h4>
<p>two lines of text</p>
</div>
And here's my CSS (scss) (https://jsfiddle.net/24cdn65x/):
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 232px;
height: 232px;
&:before {
content: '';
position: relative;
display: block;
width: 150%;
height: 150%;
box-sizing: border-box;
margin-left: -25%;
margin-top: -25%;
border-radius: 150%;
background-color: #ccc;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 232px;
background-color: #ccc;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
}
The problem is that I'm not being able to properly locate the text inside the div.
I've tried wrapping the pulsating circle on a relative div and also the content inside the pulsating circle inside a relative div.
Here's an example of what I'm trying to achieve
I hope someone can help me

Answer 1

Just give the text div a z-index of 1 and an absolute position:
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 232px;
height: 232px;
}
.pulsating-circle:before {
content: '';
position: relative;
display: block;
width: 150%;
height: 150%;
box-sizing: border-box;
margin-left: -25%;
margin-top: -25%;
border-radius: 150%;
background-color: #ccc;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 232px;
background-color: #ccc;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.text{
position: absolute;
top: 68px;
left: 90px;
z-index: 1;
}
#keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
#keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
<div class="first-color pulsating-circle">
<div class="text">
<h4>test title</h4>
<p>text text</p>
</div>
</div>

Answer 2

Alright, this is what I came up with. Looks to be completely dynamic, as long as you don't put in an insane amount of copy. Setting the parent div pulsating-circle to position:relative, and simply aligning it via margin will give you way more leeway when trying to center your text. After this, you can put your content in its own div and set its position to absolute, therefor using the parents height as the determining factor.
<div class="first-color pulsating-circle">
<div class="first-text">
<h4>test title that cant test title that cant</h4>
<p>texttext text text text text</p>
</div>
</div>
.pulsating-circle {
position: relative;
margin: 0 auto;
margin-top: 100px;
width: 232px;
height: 232px;
}
.first-text {
position: absolute;
right: 0;
left: 0;
text-align: center;
z-index: 2;
font-family: sans-serif;
color: white;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
https://jsfiddle.net/yjtqenz0/16/
Sorry for the jumbled properties!

Answer 3

If you need to use the html you have then you can do this:
<div class="pulsating-circle">
<h4>Here is a Header</h4>
<p>two lines of text two lines of text</p>
</div>
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 232px;
height: 232px;
border-radius: 232px;
background-color: #ccc;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
.pulsating-circle h4{
position: absolute;
top: 25%;
left: 30%;
z-index: 1;
}
.pulsating-circle p{
position: absolute;
top: 40%;
left: 30%;
width: 150px;
z-index: 1;
}
https://jsfiddle.net/wpybjdks/

Answer 4

Here's a version that allows for some dynamic text and centers the h4 and p vertically/horizontally. I added a class to the inner div (.inner) to target it a little easier in the CSS.
A fiddle to play with:
https://jsfiddle.net/fgyovexw/
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 232px;
height: 232px;
text-align: center;
z-index: 1;
}
.pulsating-circle:before {
content: '';
position: absolute;
display: block;
width: 150%;
height: 150%;
box-sizing: border-box;
margin-left: -25%;
margin-top: -25%;
border-radius: 150%;
background-color: #ccc;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 232px;
background-color: #ccc;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.inner {
position: relative;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140px;
}
.inner>h4 {
margin-top: 0;
}
.inner>p {
margin-bottom: 0;
}
#keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%,
100% {
opacity: 0;
}
}
#keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
<div class="first-color pulsating-circle">
<div class="inner">
<h4>long text here for title content</h4>
<p>text text text text text and more text</p>
</div>
</div>

Answer 5

Are you expecting like this:
body {
position: relative;
margin: 0;
height: 100vh;
background: linear-gradient(180deg, white 50%, #f2f2f2 50%) no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.pulsating-circle {
position: relative;
width: 232px;
height: 232px;
}
.pulsating-circle div {
display: flex;
flex-direction: column;
align-items: center;
height: inherit;
color: white;
justify-content: center;
position: relative;
z-index: 2;
}
.pulsating-circle:before {
content: '';
position: absolute;
display: block;
width: 200%;
height: 200%;
box-sizing: border-box;
margin-left: -50%;
margin-top: -50%;
border-radius: 150%;
background-color: #00BCDA;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
content: '';
position: absolute;
left: -25%;
top: -25%;
display: block;
width: 150%;
height: 150%;
border-radius: 232px;
background-color: #00BCDA;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
#keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%,
100% {
opacity: 0;
}
}
#keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
<div class="pulsating-circle">
<div>
<h4>Two lines title</h4>
<p>Two lines of text</p>
</div>
</div>

Answer 6

you can use this example:
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 232px;
height: 232px;
text-align: center;
z-index: 1;
}
.pulsating-circle:before {
content: '';
position: absolute;
display: block;
width: 150%;
height: 150%;
box-sizing: border-box;
margin-left: -25%;
margin-top: -25%;
border-radius: 150%;
background-color: #ccc;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 232px;
background-color: #ccc;
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
.text {
position: relative;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140px;
}
.text > h4 {
margin-top: 0;
}
.text > p {
margin-bottom: 0;
}
#keyframes pulse-ring {
0% {
transform: scale(0.33);
}
80%, 100% {
opacity: 0;
}
}
#keyframes pulse-dot {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
<div class="first-color pulsating-circle">
<div class="text">
<h4>test title</h4>
<p>text text</p>
</div>
</div>