[template] box shake into scrollbox onclick

<!DOCTYPE HTML><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />

<style>
@import url('https://fonts.googleapis.com/css2?family=Bellota:wght@700&display=swap');
@font-face {
font-family: rosalie;
src: url(https://dl.dropbox.com/s/xqlz6p59syect4a/rosalie.regular.otf);
}

html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

#container {
box-sizing: border-box;
background: #AFA5C9;
position: relative;
height: 19rem;
width: 19rem;
box-shadow: rgba(50, 50, 93, 0.6) 0px 50px 100px -20px, rgba(0, 0, 0, 0.5) 0px 30px 60px -30px, rgba(66, 10, 25, 0.65) 0px -2px 6px 0px inset;
padding: 0.7rem;
border-radius: 0.8rem;
}
#container:hover {
animation: shake 1s, blur 1s;
transition: all 1s ease-in-out;
transition-timing-function: cubic-bezier(0.1, 0.8, 0.9, 0.1);
}

#figure {
position: relative;
height: 100%;
width: 100%;
border-radius: 0.5rem;
pointer-events: none;
}

#container, #box, #title {
margin-right: auto;
margin-left: auto;
left: 0;
right: 0;
}

#title, #box, #left-wing, #right-wing {
position: absolute;
}

#box {
width: 70%;
height: 50%;
overflow: auto;
background: #AFA5C9CF;
font: 0.84rem 'bellota', cursive;
color: white;
padding: 0.7rem;
display: none;
bottom: 4.05rem;
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
border-radius: 0.5rem;
z-index: 3;
}

#title {
font: 5rem rosalie;
color: #fff;
text-align: center;
bottom: -3rem;
z-index: 2;
text-shadow: -1px 1px 2px #292436, 1px -1px 2px #292436, 1px 1px 2px #292436, -1px -1px 2px #292436;
}

#left-wing, #right-wing {
z-index: 1;
bottom: -1.25rem;
height: 3.5rem;
}
#left-wing {
left: 0.5rem;
}
#right-wing {
right: 0.5rem;
}

@keyframes
shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform : translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}

@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
}
50% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}

@keyframes
fadeIn {
0%, 80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0%, 80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

<div id="container" onclick="showBox()">
<img id="left-wing" src="https://dl.dropbox.com/s/kt5585xmp8b1smg/097ABBB3-8542-47DE-BDA3-9B3037C50CA4.gif">
<img id="right-wing" src="https://dl.dropbox.com/s/b9i2lb6eyxx3qj2/5DEC2971-2293-443B-BE85-E6178C40E553.gif">
<span id="title">Name</span>
<img id="figure" src="https://64.media.tumblr.com/4c9be05c255aa8181575ffff18bd15af/52dbaf2298cde065-f1/s1280x1920/d9eed2c101b63d893122bdd5c3a2fd5a89fc090b.jpg">
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis diam sit amet vestibulum blandit. Nunc in ex a quam scelerisque vestibulum id id risus. Praesent auctor justo ut odio laoreet, eu suscipit libero pellentesque. Integer id dapibus est, id tempor magna. Curabitur in dui eget mauris hendrerit aliquam. Proin id ex nec odio commodo suscipit vel vel velit. Nam congue aliquam velit vel placerat.
</div>
</div>

<script>
function showBox() {
var box = document.getElementById("box");
box.style.display = "block";
}

document.addEventListener("click", function(event) {
var container = document.getElementById("container");
var box = document.getElementById("box");
if (event.target != container && !container.contains(event.target)) {
box.style.display = "none";
}
});
</script>
</html>