Jquery 显示内容的涟漪效应

我试图创建一个小气泡，当点击时，它会扩展到整个屏幕，并显示其中的一些内容

这是我对transform的测试：
这是一个有宽度和高度的：

问题是我在显示气泡的内部内容时遇到了问题

我尝试了

transform:scale（x）

和更改宽度和高度，但这两种解决方案都存在问题（也就是说，没有正确显示任何内容）

模型：

你有什么建议吗

编辑： 这是另一种尝试，它几乎是我所需要的，但当你调整页面大小时，它会有奇怪的beavhiors，并且在展开时会有一些内部内容位置的平滑过渡，这不应该存在

你看起来怎么样

基本上，我把内部放在外部，这样它就不会被调整大小，并将其设置为与涟漪相同的位置。我还

显示：无不显示文本，然后在ripple
上单击（）
（展开时）我有
$（“.inner”）.show（）

下面是一个用于转换宽度和高度的选项：

它还对单击事件使用了css-only复选框hack


标记：
它应该在涟漪扩展时显示，就像涟漪是一个洞，显示其背后的内容…对不起，我不明白你的意思，你能详细说明吗？我会在几分钟内添加一个模型。对不起，我明白了。让我检查一下，我想我知道了，但是功能上有一些变化，在几秒钟内发布，但是内容不应该在气泡内移动，在整个转换过程中气泡应该是一个圆圈。@FezVrasta-我更新了我的答案-再看一看！现在，当气泡展开时，它不会填满整个页面。。。这和我的例子不一样。那是因为你希望它是一个圆。我希望它是一个可以扩展到整个页面的圆，看看gif可以看到想要的效果
<div class="ripple">

</div>
<div class="inner">
  <p>Something very cool! It should not reflow during the transition actually.</p>
</div>

.ripple.expanded {
  border-radius: 0;
  position: fixed;
  left:0;
  top: 0;
  width:100%;
  height: 500px;
  transition: all 2s;
}

<input type="checkbox" id="cb" />
<label for="cb"></label>

label {
    width: 40px;
    height: 40px;
    border-radius: 1000px;
    overflow: hidden;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
label:before {
    content:'';
    width: 100%;
    height: 100%;
    background: url(http://lorempixel.com/1800/1800/food) center center no-repeat blue;
    position: absolute;
}
input {
    display:none;
}
input:checked + label {
    width: 100vw;
    height: 100vw;
}