CSS Trouble making text expand and stay centered with circular expanding div

user_18851717 0
Viewed 26

I'm a 3-day beginner enjoying every minute of CSS and everything web development related.

I'm trying to make the text inside the div expand along with it on hover. Not sure as to how to keep the text centered and make it expand when the div expands.

Thank you in advance.

Here's the jsfiddle: https://jsfiddle.net/28dozgcw/

.circle+.container {
  height: 15em;
  width: 15em;
  background-color: skyblue;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1rem transparent;
  border-radius: 50%;
  opacity: 35%;
  margin: 0% 50%;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.circle+.container:hover {
  opacity: 100%;
  height: 25em;
  width: 25em;
  transition: 1s;
}

h1 {
  position: center;
  font-size: 2rem;
  color: white;
}
<div class="circle">
</div>

<div class="container">
  <h1> Lorem Ipsum </h1>
</div>

css
2 Answers

Place the <h1> .circle and give it the following:

display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;

If you want the <h1> to scale proportionally with the .circle add the following:

.circle:hover h1 {
  font-size: 3.2rem;
  transition: 1s;
}

Note: I used rem instead of em. rem is relation to the root font-size (html {font: 1ch...}), em is in relation to the font-size of parent element. If you want everything to scale proportionally, just change the root font-size.

html {
  font: 1ch/1 'Segou UI'
}

.circle {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 15rem;
  width: 15rem;
  background-color: skyblue;
  border: 1px solid transparent;
  border-radius: 50%;
  opacity: 0.4;
  margin: 0 auto;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.circle:hover {
  opacity: 1.0;
  height: 25rem;
  width: 25rem;
  transition: 1s;
}

h1 {
  font-size: 2rem;
  color: white;
}

.circle:hover h1 {
  font-size: 3.2rem;
  transition: 1s;
}
<header class="circle">
  <h1>Centered Title</h1>
</header>

user_28132240

Your text isn't even centered when the element is not hovered. To center it in both situations, add justify-content: center; to the flex container:

.circle + .container {
  height: 15em;
  width: 15em;
  background-color: skyblue;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1rem transparent;
  border-radius: 50%;
  opacity: 35%;
  margin: 0% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.circle+.container:hover {
  opacity: 100%;
  height: 25em;
  width: 25em;
  transition: 1s;
}

h1 {
  font-size: 2rem;
  color: white;
}
<div class="circle">
</div>

<div class="container">
  <h1> Lorem Ipsum </h1>
</div>

user_56416690
Related