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

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 >
</div>

<div >
  <h1> Lorem Ipsum </h1>
</div>

CodePudding user response：

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 >
  <h1>Centered Title</h1>
</header>

CodePudding user response：

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 >
</div>

<div >
  <h1> Lorem Ipsum </h1>
</div>