Javascript 使圆形div在单击并显示内容时展开为其父级

我想创建一个圆形div，它扩展到其父div的全宽，并显示内容。至少这是我希望用户体验的方式。我阅读了创建的类似主题，但它们要么不能满足我的需要，要么就是我无法很好地实现它们。 这是我想要它看起来像什么的草图

以下是我迄今为止所做的工作

功能展示详情（详情编号）{
变量i，x；
x=document.getElementsByClassName（“家庭保险”）；
对于（i=0；i

.hero滑块{
位置：相对位置；
边缘底部：50px；
}
.英雄滑块.幻灯片{
列表样式：无；
*缩放：1；
}
.英雄滑块.幻灯片：之后{
内容：“；
明确：两者皆有；
显示：块；
溢出：隐藏；
身高：0；
}
.hero slider.li幻灯片{
最小高度：460px；
浮动：左；
保证金权利：-100%；
宽度：100%；
背景尺寸：封面；
背景位置：中心；
}
.英雄滑块.幻灯片内容{
边界半径：3px；
背景色：白色；
宽度：25%；
填充：30px；
边缘顶部：50px；
边缘底部：30px；
}
@媒体屏幕和屏幕（最大宽度：990px）{
.英雄滑块.幻灯片内容{
宽度：50%；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
.英雄滑块.幻灯片内容{
宽度：100%；
}
}
.英雄滑块.幻灯片内容.幻灯片标题{
字体大小：35px；
字号：2.1875em；
字体大小：300；
边缘底部：30px；
}
.英雄滑块.幻灯片内容.幻灯片标题强{
颜色：#0f75bd；
显示：块；
字体大小：300；
}
.英雄滑块.幻灯片内容p{
线高：2；
边缘底部：50px；
}
.英雄滑块.柔性控制导航{
列表样式：无；
位置：绝对位置；
底部：-50px；
宽度：100%；
文本对齐：居中；
}
.英雄滑块.柔性控制导航李{
显示：内联块；
利润率：0.5px；
}
.英雄滑块.柔性控制导航李a{
显示：块；
宽度：15px；
高度：15px；
背景色：#c6c7c7；
边界半径：50%；
溢出：隐藏；
文本缩进：-9999px；
光标：指针；
}
.hero滑块.flex控制导航李a.flex-active{
背景色：#0f75bd；
}
.集装箱{
右边距：自动；
左边距：自动；
左侧填充：15px；
右侧填充：15px；
*缩放：1；
}
.货柜：之后{
内容：“；
明确：两者皆有；
显示：块；
溢出：隐藏；
身高：0；
}
@介质（最小宽度：768px）{
.集装箱{
宽度：750px；
}
}
@介质（最小宽度：992px）{
.集装箱{
宽度：970px；
}
}
@介质（最小宽度：1200px）{
.集装箱{
宽度：1170px；
}
}
.新闻列表{
边缘顶部：50px；
}
.垂直水平中心{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.行{
左边距：-15px；
右边距：-15px；
*缩放：1；
}
.罗：之后{
内容：“；
明确：两者皆有；
显示：块；
溢出：隐藏；
身高：0；
}
1.家庭保险{
司法化内容：中心；
对齐项目：居中；
光标：指针；
}
1.家庭保险{
过渡：0.5s缓解；
}
.家庭保险：悬停{
-webkit转换：比例（1.1）；
-ms变换：比例（1.1）；
转换：比例（1.1）；
过渡：0.5s缓解；
}
.h-保险{
司法化内容：中心；
对齐项目：居中；
光标：指针；
背景色：#082336；
边框样式：实心；
边界半径：50%；
边框颜色：#082336；
}
.提高{
显示：内联块；
填充顶部：15px；
垂直对齐：顶部；
文本对齐：居中；
宽度：100%；
}
1.加薪1{
字体大小：6vw；
颜色：#fff；
}
.提高跨度{
颜色：#fff；
边缘顶部：15px；
}
.文本中心{
文本对齐：居中；
}

内容0
内容1
内容2
内容3
内容4
卡帕特

您可以首先尝试从ul元素中移除填充：

.hero slider.slides{
填充：0；
}

我已经设法使用jquery animate实现了动画。 我已经向class

h-insurance

标识的元素添加了一个属性

dnumber

，并删除了“onclick（）”函数

$('.h-insurance').on('click', function() {
  let dnumber = '#' + $(this).attr('dnumber');
  // hide all home-insurance div tags
  $('.home-insurance').hide();
  // show only the home-insurance div (circle) on which animation is required
  $(this).closest('.home-insurance').show();
  // hide caption of the circle
  $(this).closest('.home-insurance').find('span').hide();

  // animate the circle with time of 1000ms
  $(this).animate({
    height: '100vh',
    width: '100%'
  }, 1000);

  // hide the circle and show the display block after 1000ms
  // this code executes after the circle animation
  setTimeout(function() {
    $('.home-insurance').hide();
    $(dnumber).show(1);
  }, 1000);

});

检查JSFIDLE

---

谢谢，这看起来非常接近我的目标。但我无法管理从圆形到矩形的过渡。我想让它看起来更干净。