JSFiddle - React, Tailwind, and code Playground

HTML

<p>
 <b>border-radius</b> + <b>overflow</b> + <b>transform</b><br/>
 move cursor over the ellipse to test it.
</p>

<div class="hov">
  <div class="scale">
    CSS test
  </div>
</div>

CSS

body {
  color: #333;
  background: #ddd;
  font: 400 12pt sans-serif;
  text-align: center
}

.hov {
  display: inline-block;
  margin: 10mm auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px #eee,
    0 1mm 8mm rgba(0, 0, 0, .7)
}

.scale {
  text-align: center;
  background: #acc;
  padding: 2em;
  transition: 1s
}

.hov:hover .scale {
  transform: scale(1.5);
  transition: .2s
}