Goodies — Ghost Bubble

<!-- Ghost Bubble by Franchesca (extasisthemes) -->

<!-- Place this before the CSS part of the code. -->

<meta name="color:Ghost Color" content="#738a82"/>
<meta name="color:Ghost EM" content="#2b4343"/>
<meta name="color:Bubble Background" content="#ffffff"/>
<meta name="color:Bubble Border" content="#eeeeee"/>
<meta name="color:Bubble Color" content="#555555"/>

<!-- Show On Click Script -->

<script>
function myFunction() {
var x = document.getElementById("bubble-wrapper");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

/** Paste this in the CSS part of the code. **/

#ghost-wrapper {
bottom: 20px;
height: 200px;
position: fixed;
right: 20px;
width: 190px;
z-index: 1;
}

#ghost {
height: 200px;
position: fixed;
width: 190px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#ghost:hover {
opacity: 0.7;
}

.ghost-main {
background: {color:Ghost Color};
border-radius: 100px;
height: 150px;
margin-left: 20px;
position: absolute;
width: 150px;
}

.ghost-eye-left {
background: {color:Ghost EM};
border-radius: 100%;
height: 5px;
margin-top: 50px;
margin-left: 65px;
position: absolute;
width: 15px;
z-index: 1;
}

.ghost-eye-right {
background: {color:Ghost EM};
border-radius: 100%;
height: 5px;
margin-top: 50px;
margin-left: 105px;
position: absolute;
width: 15px;
z-index: 1;
}

.ghost-mouth {
background: {color:Ghost EM};
border-radius: 100%;
height: 10px;
margin-top: 55px;
margin-left: 90px;
position: absolute;
width: 10px;
z-index: 1;
}

.ghost-hand-left {
background: {color:Ghost Color};
border-radius: 50px 100px 50px 100px;
height: 30px;
margin-left: 0px;
margin-top: 75px;
position: absolute;
width: 40px;
z-index: 1;
}

.ghost-hand-right {
background: {color:Ghost Color};
border-radius: 100px 50px 100px 50px;
height: 30px;
margin-left: 150px;
margin-top: 75px;
position: absolute;
width: 40px;
z-index: 1;
}

.coattails-one {
background: {color:Ghost Color};
border-radius: 100px;
height: 150px;
margin-left: 20px;
margin-top: 50px;
position: absolute;
width: 56.25px;
}

.coattails-two {
background: {color:Ghost Color};
border-radius: 100px;
height: 150px;
margin-left: 49px;
margin-top: 50px;
position: absolute;
width: 56.25px;
}

.coattails-three {
background: {color:Ghost Color};
border-radius: 100px;
height: 150px;
margin-left: 79.75px;
margin-top: 50px;
position: absolute;
width: 56.25px;
}

.coattails-four {
background: {color:Ghost Color};
border-radius: 100px;
height: 150px;
margin-left: 108.75px;
margin-top: 50px;
position: absolute;
width: 56.25px;
}

#bubble-wrapper {
display: none;
}

.bubble {
background: {color:Bubble Background};
border: 1px solid {color:Bubble Border};
border-radius: 5px;
bottom: 220px;
color: {color:Bubble Color};
font-size: 0.9rem;
font-style: normal;
height: 75px;
hyphens: auto;
letter-spacing: 1px;
overflow-y: scroll;
padding: 20px;
position: absolute;
z-index: 1;
text-align: center;
text-transform: uppercase;
width: 148px;
word-wrap: break-all;
}

<!-- Paste this in the HTML part of the code. -->

<div id="ghost-wrapper">

<div id="ghost">

<a onclick="myFunction()" title="Boo">

<div class="ghost-main"></div>

<div class="ghost-eye-left"></div>

<div class="ghost-eye-right"></div>

<div class="ghost-hand-left"></div>

<div class="ghost-hand-right"></div>

<div class="ghost-mouth"></div>

<div class="coattails-one"></div>

<div class="coattails-two"></div>

<div class="coattails-three"></div>

<div class="coattails-four"></div>

</a>

</div>

<div id="bubble-wrapper">

<div class="bubble">
CSS Ghost inspired by Louie Zong. Listen to <i>Ghost Choir</i> <a href="https://www.youtube.com/watch?v=kXF3VYYa5TI">here</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>

</div>