Question

＆＃13;

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
  });
});

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

如果你们中的某个人可以帮我解决这个问题，我已经在这方面工作了很长时间所以我正在创建这个网页，其中有一个图片点击它应该产生一些文本...基本上是一个使用HTML或CSS的文本框这里的图片是通过CSS而不是HTML img标签添加的，这就是我遇到问题的原因。

编辑：抱歉忘了添加代码...所以我想在鼠标悬停/点击最后一张图片时显示一个文本框

Answer 1

当您说“最后一张图片”时，您的意思是在点击时出现的4张图片之上？

如果是这种情况，那就是如何让它发挥作用。

使用background-image添加图片：

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

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

然后在.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>

使用opacity隐藏css中的文字，只在鼠标悬停时显示：

.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;
}

这是一个JsFiddle：DEMO

注意：如果您希望文字仅在点击时显示：

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

然后使用jQuery：

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

单击图像时添加文本框

1 个答案: