Making Speech Bubble with CSS

I'm such a big fan of '90s RPG games, which show the speech bubble at the bottom of the screen with a illustration of character. The most important point of the '90s speech bubble is that it's all pixelated!

##Creating Speech Bubble

With a simple code of CSS, you can create speech bubbles on your website too.

#arrow_box {
    z-index: 4;
    display: none;
    position: absolute;
    width: 40px;
    padding: 6px;
    top: 120px;
    left: 155px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
    color: #333;
    border: 1px solid black;
    font-size: 12px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
  }

Line 2 through 14 describe the appearence of the bubble and line 15 through 17 describe the look of the text content in the bubble. You will be able to change the style of the bubble by changing the font or background color. 

##Adding Hover Effect

 div:hover + p#arrow_box {
    display: block;
  }

You can also add the mouse hover effect by adding this code at the end. Hover effect can be applied in various ways. For example, if you move the mouse over the character, you can make a speech bubble float on it. 

Ta-da! I used this stylesheet for my very first project when I started learning coding. The 'Come in' text is linked to the other image of room so the visitor can experience touring someone's apartment. It can be applied in other various ways too.