lirus lirus - 5 months ago 9
CSS Question

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

Answer

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");
})
Comments