上點擊圖像

上點擊圖像

$(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>

我一直在這個相當長的一段時間，如果你有人可以幫助我這個所以我創建這個網頁添加文本框，其中有是一個圖片點擊它應該產生一些文本..基本上使用HTML或CSS的文本框這個圖像已經通過CSS添加，而不是HTML img標籤，所以這就是爲什麼我面臨一個問題。

編輯：對不起忘了添加代碼...所以我希望顯示懸停文本框/單擊最後一個圖像

來源

2016-06-11 lirus

我們能看到你的代碼，好嗎？ – StardustGogeta

您需要發佈最少，完整且可驗證的代碼，以便我們能夠提供幫助。請參閱此鏈接以獲得幫助http://stackoverflow.com/help/mcve – amallard

這可能與您的問題無關。無論如何，這些圖像仍然與元素相關聯。 – PHPglue

。當你說「最後的形象」，你的意思是對的4頂圖像出現在點擊？

如果是這樣的話，那麼你可以使它工作。

與背景圖像添加圖片：

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

來源

2016-06-11 02:36:39

點擊的東西似乎不起作用 – lirus

哦，我只是錯過了'''在聽衆的末尾。看我的編輯。 –

即使我只是錯過了:( – lirus

回答

相關問題