Goodies — Iron Man Bubble

<!-- Iron Man Bubble by Franchesca (extasisthemes) -->

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

<!-- 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. **/

#iron-man-wrapper {
bottom: 20px;
height: 170px;
position: fixed;
right: 20px;
width: 170px;
z-index: 1;
}

#iron-man {
background: #e61e28;
border-radius: 100px;
height: 170px;
position: absolute;
width: 170px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

#iron-man:hover {
opacity: 0.7;
}

.iron-man-faceplate {
background: #f3b922;
border-radius: 100px;
height: 140px;
margin-left: 15px;
margin-top: 15px;
position: absolute;
width: 140px;
}

.curve-head {
border-top: 50px solid #e61e28;
border-radius: 100px  ;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0px;
margin-left: 47.5px;
margin-top: 3px;
position: absolute;
width: 25px;
}

.curve-one {
background: #e61e28;
border-radius: 65%;
border-right: 15px solid #e61e28;
height: 85px;
margin-top: 42.5px;
position: absolute;
width: 20px;
}

.curve-two {
background: #e61e28;
border-radius: 65%;
border-right: 15px solid #e61e28;
height: 85px;
margin-left: 135px;
margin-top: 42.5px;
position: absolute;
width: 20px;
}

.im-eye-left {
background: #93d6fa;
border: 3px solid #b88038;
border-radius: 5px;
height: 5px;
margin-left: 50px;
margin-top: 75px;
position: absolute;
width: 15px;
}

.im-eye-right {
background: #93d6fa;
border: 3px solid #b88038;
border-radius: 5px;
height: 5px;
margin-left: 100px;
margin-top: 75px;
position: absolute;
width: 15px;
}

.mouth-top {
background: #b88038;
height: 3px;
margin-left: 60px;
margin-top: 120px;
position: absolute;
width: 50px;
}

.mouth-left {
background: #b88038;
height: 27.3px;
margin-left: 54px;
margin-top: 120px;
position: absolute;
transform: rotate(20deg);
width: 3px;
}

.mouth-right {
background: #b88038;
height: 27.3px;
margin-left: 112px;
margin-top: 120px;
position: absolute;
transform: rotate(-20deg);
width: 3px;
}

#bubble-wrapper {
display: none;
}

.bubble {
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 5px;
bottom: 190px;
color: #555555;
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: 128px;
word-wrap: break-all;
}

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

<div id="iron-man-wrapper">

<div id="iron-man">

<a onclick="myFunction()" title="I Love You 300">

<div class="iron-man-faceplate"></div>

<div class="curve-head"></div>

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

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

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

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

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

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

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

</a>

</div>

<div id="bubble-wrapper">

<div class="bubble">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>

</div>