<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);
View Compiled
$('.teaser').click( function() {
$('.info, .teaser').toggleClass('active');
});
This Pen doesn't use any external CSS resources.