CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lirus
lirus

Reputation: 25

Adding text box on clicking an image

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
  });
});
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;
}
<!DOCTYPE HTML>
<body>
 <section id="header">
  <div class="inner">
   <div class="menu">
    <div class="btn trigger">
      <span class="line"></span> 
    </div>
    <div class="icons">
      <div class="rotater">
        <div class="btn btn-icon" title="Send a hug to Mohammed">
          <p class="text-box">
            Hello
          </p>
        </div>
      </div>
      <div class="rotater">
        <div class="btn btn-icon" title="Send a kiss to Margaret">
          <p class="text-box">
            This
          </p>
        </div>
      </div>
      <div class="rotater">
        <div class="btn btn-icon" title="Wish Good Morning to your Family">
          <p class="text-box">
            Doge
          </p>
        </div>
      </div>
      <div class="rotater">
        <div class="btn btn-icon "  title="Express your love">
          <p class="text-box">
            Is
          </p>
        </div>
      </div>
     </div>
    </div>
   </div>
  </section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src="assets/js/index.js"></script>
</body>

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.

EDIT: sorry forgot to add the code...so i want to display a text box on hovering/clicking on the last image

Upvotes: 1

Views: 200

Answers (1)

Mathieu Schaeffer
Mathieu Schaeffer

Reputation: 792

When you say "last image", you mean on top of the 4 images appearing on click ?

If that's the case, there's how you can make it work.

Add image with background-image : 

 /* Old version : 
   content:url(/home/curiousfool/Downloads/Exxo/images/12.jpg); */

   background-image:url("path_to_your_image");
   background-size:cover;

Then add some text inside the .btn-icon :

<div class="rotater">
  <div class="btn btn-icon" title="Wish Good Morning to your Family">
    <p class="text-box">
       Doge
    </p>
  </div>
</div>

And hide the text in css with opacity, only display it on mouse hover :

.text-box{
  text-align:center;
  z-index:3;
  font-size:18px;
  font-weight:900;
  color:white;
  padding-top:30px;
  opacity:0;

  -webkit-transition: all 0.5s ease; /* Safari */
  transition: all 0.5s ease;
}

.text-box:hover{
  opacity:1;
}

Here is a JsFiddle : DEMO

Note : If you want the text to only appear on click : 

/* Replace this part : */
.text-box:hover{
  opacity:1;
}
/* With this : */
.showText{
  opacity:1;
}

Then with jQuery :

$(".text-box").click(function(){
  $(this).toggleClass("showText");
})

Upvotes: 2

Related Questions