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:
<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:
@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