<div class="teaser">
  <h3>Want to learn more?</h3>
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ipsum elit, egestas ac feugiat non, pretium in nibh. Nulla a massa aliquam, suscipit felis sed, feugiat turpis. Ut aliquam, nulla vitae dignissim lobortis, metus neque porta quam, vel vestibulum urna nulla ut nibh.</p>
  </div>
</div> 

.teaser {
  background:
    linear-gradient(to bottom right, 
      fade(white,40%), 
      fade(white,20%), 
      fade(white,20%), 
      fade(white,40%));
  backdrop-filter:blur(2px);
  box-shadow:
    3px 3px 10px fade(black,10%),
    inset 10px 10px 30px fade(white,20%),
    inset -10px -10px 30px fade(white,20%);
  border-top:1px solid fade(white,50%);
  border-left:1px solid fade(white,50%);
  border-radius:32px;
  padding:30px 40px;
  max-width:250px;
  max-height:250px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  cursor:pointer;
  transition:
    @time max-width @timing calc(@time * 2),
    @time max-height @timing @time;
  &.active {
    max-width:400px;
    max-height:400px; 
    transition:
      @time max-width @timing 0ms,
      @time max-height @timing @time;
  }
  h3 {
    margin:10px 0
  }
  .info {
    opacity:0;
    max-width:0;
    max-height:0;
    transition:
      @time max-width @timing calc(@time * 2),
      @time max-height @timing @time,
      @time opacity @timing 0ms;
    p {
      margin:10px 0 
    }
    &.active {
      max-width:400px;
      max-height:400px;
      opacity:1;
      transition:
        400ms max-width @timing 0ms,
        400ms max-height @timing @time,
        400ms opacity @timing calc(@time * 2);
    }
  }
}

body { 
  backdrop-filter:soft-light;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white' fill-opacity='0.15' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom right, dodgerblue, hotpink);
  color:white;
  text-shadow:1px 1px 2px fade(black,25%);
  font-family:system-ui, sans-serif;
  font-size:18px;
  height:98.65vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
@time: 500ms;
@timing: cubic-bezier(.25,.75,.5,1.25);

$('.teaser').click( function() {
  $('.info, .teaser').toggleClass('active');
});