Hilfe bei Ausbau eines HTML-/CSS-Schnipsel

Kurtus

Hallo liebe Experten,

ich habe auf der tollen Archivseite littlesnippets.net die Nummer 1067 gefunden und möchte diesen Schnipsel gerne in meine Homepage einbinden. Beim Überfahren mit der Maus (mouseover effect) werden drei Icons eingeblendet. Diese kann man mit einem Link hinterlegen.

Könnte mir jemand den Code so abändern, dass anstelle eines Links ein Popup Fenster erscheint, das - je nachdem welches Icon gerade mit der Mause angewählt wurde (mouseover) - die Telefonnummer, Adresse bzw EMail anzeigt?

Leider bin ich noch absoluter Anfänger und weit davon entfernt so etwas einfach umzusetzen...

Hier der Beispiel HTML-Code:

Code

<figure class="snip0067 red">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample2.jpg" alt="sample8" />
  <figcaption>
    <h2>Gabriel <span>Lavarez</span></h2>
    <p>I'm a genius, but I'm a misunderstood genius.</p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-email-unread"></i></a><a href="#"><i class="ion-ios-star"></i></a></div>
  </figcaption>
  <div class="position">Illustrator</div>
</figure>
<figure class="snip0067 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample3.jpg" alt="sample3" />
  <figcaption>
    <h2>Roland <span>Lee</span></h2>
    <p>I'm a simple man with complex tastes.</p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  </figcaption>
  <div class="position">Software Engineer</div>
</figure>
<figure class="snip0067 yellow"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample5.jpg" alt="sample5" />
  <figcaption>
    <h2>Annie <span>Watkins</span></h2>
    <p>I'm just very selective about the reality I choose to accept. </p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  </figcaption>
  <div class="position">Accoutant</div>
</figure>

Alles anzeigen

und hier der Beispiel CSS-Code:

Code

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0067 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  background: #ffffff;
  color: #000000;
}

figure.snip0067 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

figure.snip0067 img {
  max-width: 100%;
  position: relative;
  display: block;
}

figure.snip0067:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 90%;
  z-index: 1;
  left: -20%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #fff;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: skewX(-30deg) translateX(-80%);
  transform: skewX(-30deg) translateX(-80%);
  -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
}

figure.snip0067 figcaption {
  padding-left: 30px;
  position: absolute;
  left: 0;
  top: 25%;
  width: 60%;
  z-index: 1;
  opacity: 0;
}

figure.snip0067 figcaption h2,
figure.snip0067 figcaption p {
  margin: 0;
  text-align: left;
  padding: 5px 0 0;
  width: 100%;
}

figure.snip0067 figcaption h2 {
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
}

figure.snip0067 figcaption h2 span {
  font-weight: 800;
}

figure.snip0067 figcaption p {
  font-weight: 500;
  font-size: 0.9em;
  opacity: 0.8;
}

figure.snip0067 figcaption .icons {
  width: 100%;
  padding: 8px 0;
}

figure.snip0067 figcaption .icons i {
  display: inline-block;
  font-size: 20px;
  background: #000000;
  color: #ffffff;
  margin-right: 5px;
  opacity: 0;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
}

figure.snip0067 figcaption a {
  opacity: 0.7;
}

figure.snip0067 figcaption a:hover {
  opacity: 1;
}

figure.snip0067 .position {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 15px 30px;
  font-size: 0.9em;
  opacity: 1;
  font-weight: 500;
  color: #ffffff;
  background: #000000;
}

figure.snip0067.blue .icons i {
  background: #164666;
}

figure.snip0067.blue .position {
  background: #20638f;
}

figure.snip0067.red .icons i {
  background: #6d2018;
}

figure.snip0067.red .position {
  background: #962d22;
}

figure.snip0067.yellow .icons i {
  background: #924d10;
}

figure.snip0067.yellow .position {
  background: #bf6516;
}

figure.snip0067.green .icons i {
  background: #145b32;
}

figure.snip0067.green .position {
  background: #1e8449;
}

figure.snip0067:hover figcaption,
figure.snip0067.hover figcaption,
figure.snip0067:hover .icons i,
figure.snip0067.hover .icons i {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

figure.snip0067:hover:before,
figure.snip0067.hover:before {
  -webkit-transform: skewX(-30deg) translateX(0px);
  transform: skewX(-30deg) translateX(0px);
}

Alles anzeigen

ich würde mich freuen, wenn mir einer der Expertinnen oder Experten hierbei helfen könnten.

Liebe Grüße
Kurtus

basti1012

was meinst du mit popup? Ein alert?

Kurtus

Ja, so etwas wie eine Sprechblase oder viereckiges Fenster, so dass man beim Überfahren des Icons, mit dem Mauszeiger, sofort die Info angezeigt bekommt.

basti1012

ich habe bei jeden Bild was andere versucht .Einmal ein div der bei mousover kommt und wider geht.

Das mittlere fenster kommt ein div und geht nur wenn man es weg klickt.

Das letzte bild mit den standart alert.

Sprechblasen wären auch möglich

http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte/bei_hover_alert_zeigen.php#

Edit habe jetzt sprechblase hinzugefügt

m.scatello

Siehe https://www.w3schools.com/css/css_tooltip.asp

Kurtus

Hallo basti1012,

vielen Dank für Deine Bemühungen.

Die erste Variante mit der Sprechblase gefällt mir am Besten. Das war genau das was ich mir vorgestellt habe.

Muss als absoluter Laie jetzt nur noch herausfinden welche Teile, die zur Sprechblase gehören aus deinem Code ich in die CSS Datei kopieren muss und welche ich in der HTML-Datei zu ergänzen habe.

Auch an m.scatello herzlichen Dank für den Hinweis.

Ich habe das mit dem Tooltip mal ausprobiert, allerdings verschwinden das Icon bei mir, wenn ich den div-Container hinzufüge, hier am Beispiel des ersten Icons bei dem der Tooltip "test" erscheinen sollte:

HTML-Code:

HTML

<figure class="snip0067 red">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample2.jpg" alt="sample8" />
  <figcaption>
    <h2>Gabriel <span>Lee</span></h2>
    <p>I'm a genius, but I'm a misunderstood genius.</p>
    <div class="icons"><div class="tooltip"><i class="ion-ios-home"></i><span class="tooltiptext">test</span>
</div><a href="#"><i class="ion-email-unread"></i></a><a href="#"><i class="ion-ios-star"></i></a></div>
  </figcaption>
  <div class="position">Illustrator</div>
</figure>

CSS Code:

CSS

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

Alles anzeigen

Wahrscheinlich mache ich auch hier einen Denkfehler mit meinem Halbwissen.

Evtl. kann mir da jemand weiterhelfen, wo mein Fehler liegt.

Vielen Dank!

Kurtus

Edit:

in einer normalen HTML-Datei funktioniert es. allerdings wollte ich es in einem Beitrag in Joomla verwenden.

Hier verschwindet das Icon...

Kurtus

Konnte das mit dem Tooltip und verschwundenen Icons lösen:

Ich musste die Angabe opacity: 1;beim .tooltip {hinzufügen, damit ging es auch unter Joomla.

Danke nochmals für Eure Hilfe!

Kurtus

Jetzt mitmachen!