Textfeld Hinzufügen auf ein Bild klicken

$(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 daran gearbeitet haben für eine sehr lange Zeit, wenn jemand von euch mir mit diesem helfen könnte So erschaffe ich diese Webseite, in denen es ist ein Bild, auf dem es etwas Text herstellen sollte..basically ein Textfeld mit HTML oder CSS die Bilder in diesem wurden über CSS anstelle von HTML img Tag hinzugefügt, so dass, warum ich ein Problem habe.

EDIT: sorry vergessen, den Code hinzufügen ... so möchte ich auf Schweben/Klick auf das letzte Bild

Quelle

2016-06-11 lirus

Können wir Ihren Code sehen, bitte? – StardustGogeta

Sie müssen minimalen, vollständigen und überprüfbaren Code posten, damit wir Ihnen helfen können. Siehe diesen Link für Hilfe http://stackoverflow.com/help/mcve – amallard

Das hat wahrscheinlich nichts mit Ihrem Problem zu tun. Die Bilder sind immer noch mit Elementen verbunden. – PHPglue

ein Textfeld angezeigt wird, wenn Sie „letztes Bild“ sagen, Sie oben auf der 4 bedeuten, Bilder erscheinen auf Klick?

Wenn das der Fall ist, gibt es, wie Sie es zum Funktionieren bringen können.

Add-Bild mit Hintergrund-Bild:

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

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

Dann einen Text innerhalb der .btn-icon hinzufügen:

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

und den Text in CSS mit opacity verstecken, es nur auf Maus schweben anzuzeigen:

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

Hier ist ein JsFiddle: DEMO

Hinweis: Wenn sich der Text nur auf Klick erscheinen:

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

dann mit jQuery:

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

Quelle

2016-06-11 02:36:39

das auf Klick Ding scheint nicht zu arbeiten – lirus

Oh, ich habe gerade ein ')' am Ende des Hörers verpasst. Siehe meine Bearbeitung. –

sogar ich habe das gerade verpasst :( – lirus

Textfeld Hinzufügen auf ein Bild klicken

Antwort

Verwandte Themen