title: Adding text box on clicking an image
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".trigger").click(function() {
      $(".menu").toggleClass("active"); 
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body 
  {
    height: 100%;
    overflow: hidden;
  }
  .absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line
   {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
  .menu
  {
    width: 5em;
    height: 5em;
  }
  .menu .btn 
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255,0.5);
    opacity: 0;
    z-index: -10;
    cursor: pointer;
    -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
    transition: opacity 2s, z-index 1s, -webkit-transform 1s;
    transition: opacity 2s, z-index 1s, transform 1s;
    transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .menu .btn.trigger {
    opacity: 1;
    z-index: 100;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
     content:url(/home/curiousfool/Downloads/Exxo/images/a.jpg);
  }
  .menu .btn.trigger:hover
  {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  .menu .rotater 
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  .menu.active .btn-icon
  {
    opacity: 1;
    z-index: 50;
  }
  .rotater:nth-child(1)
  {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .menu.active .rotater:nth-child(1) .btn-icon
  {
    -webkit-transform: translateY(-12em) rotate(45deg);
            transform: translateY(-12em) rotate(45deg);
     content:url(/home/curiousfool/Downloads/Exxo/images/12.jpg);
     align: top;
  }
  .rotater:nth-child(2) 
  {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .menu.active .rotater:nth-child(2) .btn-icon 
  {
    -webkit-transform: translateY(-12em) rotate(-45deg);
            transform: translateY(-12em) rotate(-45deg);
     content:url(/home/curiousfool/Downloads/Exxo/images/22.jpg);
     align: top;
  }
  
  .rotater:nth-child(3)
  {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  
  }
  .menu.active .rotater:nth-child(3) .btn-icon 
  {
    -webkit-transform: translateY(-12em) rotate(-135deg);
            transform: translateY(-12em) rotate(-135deg);
     content:url(/home/curiousfool/Downloads/Exxo/images/sun.jpg);
     align: top;
  }
  .rotater:nth-child(4) 
  {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
  .menu.active .rotater:nth-child(4) .btn-icon
  {
    -webkit-transform: translateY(-12em) rotate(-225deg);
            transform: translateY(-12em) rotate(-225deg);
     content:url(/home/curiousfool/Downloads/Exxo/images/heart.jpg);
     align: top;
  }
  .menu.active .rotater:nth-child(4) .btn-icon
  {
    -webkit-transform: translateY(-12em) rotate(-225deg);
            transform: translateY(-12em) rotate(-225deg);
     content:url(/home/curiousfool/Downloads/Exxo/images/heart.jpg);
     align: top;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;body&gt;
   &lt;section id="header"&gt;
    &lt;div class="inner"&gt;
     &lt;div class="menu"&gt;
      &lt;div class="btn trigger"&gt;
        &lt;span class="line"&gt;&lt;/span&gt; 
      &lt;/div&gt;
      &lt;div class="icons"&gt;
        &lt;div class="rotater"&gt;
          &lt;div class="btn btn-icon" title="Send a hug to Mohammed"&gt;
            &lt;p class="text-box"&gt;
              Hello
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="rotater"&gt;
          &lt;div class="btn btn-icon" title="Send a kiss to Margaret"&gt;
            &lt;p class="text-box"&gt;
              This
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="rotater"&gt;
          &lt;div class="btn btn-icon" title="Wish Good Morning to your Family"&gt;
            &lt;p class="text-box"&gt;
              Doge
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="rotater"&gt;
          &lt;div class="btn btn-icon "  title="Express your love"&gt;
            &lt;p class="text-box"&gt;
              Is
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/section&gt;
    &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
    &lt;script src="assets/js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i have been  working on this for quite a long time if someone of you could help me out with this
  So i am creating this webpage in which there is a pic clicking on which it should produce some text..basically a text box using HTML or CSS
  the images in this have been  added via CSS instead of HTML img tag so thats why i am facing a problem.</p>
  
  <p>EDIT: sorry forgot to add the code...so i want to display a text box on hovering/clicking on the last image</p>