CSS 使文本扩展并保持居中与圆形扩展 div 的问题

.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>

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

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

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>

Css相关问答推荐

Tailwind仅在启用时才在按钮上设置group-hover

主dart 文件未加载Flutter Web

如何在移动屏幕尺寸上包装元素？

Primeng Angular更改p-dialog背景 colored颜色

InertiaJS - Vue - Laravel：Using CSS Files

为什么我的容器的弹性包裹会导致我的自动填充网格添加额外的空轨道行？

如何为多个背景和棋盘设置不同的大小

使用间距时奇怪的MUI网格行为

用两步函数内插的css动画值

是否可以在元素之间对齐渐变？

Firefox未正确设置SVG的父div的宽度

如何在相对位置和绝对位置之间转换元素？

努力将 CSS 样式应用于 Elm 应用程序

Ant Design：将位置子菜单移动到屏幕顶部

仅对父容器应用模糊效果

css中的背景图像没有被缓存

绝对位置和溢出：隐藏

创建 CSS 全局变量：样式表主题管理

bootstrap 程序中有 7 个相等的列

为什么只为第一个元素显示双引号？