Hallo Experten,
ich habe ein kleines Problem.
ich habe von der Seite littlesnippets.net/ einen Codeschnipsel bei mir in der Joomla-Homepage eingefügt.
Das hat auch wunderbar geklappt.
Hier der 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 der dazugehörige 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
Nun wollte ich die, in diesem Codeschnipsel vorhandenen Buttons mit einem Tooltip hinterlegen.
CSS Code:
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: #6d2018;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 150%;
left: 100%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -41px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #6d2018 transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Alles anzeigen
HTML-Code:
Dies funktioniert, wenn ich es auf einer "normalen" HTML-Seite ausführe einwandfrei:
Link zu dem Test ohne Joomla
Wenn ich es in einem Beitrag in Joomla eingebe, sind die Buttons plötzlich nicht mehr sichtbar.
Ohne den Tooltip (siehe drittes Foto) sieht man die Buttons:
Link zum Test mit Jooma
Auf beiden Testseiten sind die Buttons
- des ersten Fotos (Vorsitzender - John Doe) mit dem HTML-Code für den Tooltip und die
- des dritten Fotos (Schatzmeister - Annie Watkins) ohne den HTML-Code versehen.
Was mache ich falsch bzw. woran kann es liegen?
Vielen Dank für Eure Hilfe
Kurtus