Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Gestern um 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

[phpBB2] Caption Hover einfügen

2 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Caption Hover einfügen

Beitrag von Ryu So 9 Jul 2017 - 15:03

URL-Adresse des Forums: http://stylelol.forumieren.de/
Rang/Funktion im Forum: Admin
Forenversion: phpbb 2
Browser: Firefox
Persönliches CSS(Ja/Nein): Ja
Templateänderungen(Ja/Nein): Nein

Hallo, ich wollte wissen wie ich ein caption hover als Beschreibung in der Kategorie einfügen kann, das genau wie dies hier ist:
hasinhayder.github.io/ImageCaptionHoverAnimation/index2.html


Zuletzt von Ryu am Di 11 Jul 2017 - 16:44 bearbeitet; insgesamt 1-mal bearbeitet
Ryu
Ryu
Lehrling
Lehrling

Männlich Beiträge : 27
Anmeldedatum : 01.06.11
keine
phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von inde Mo 10 Jul 2017 - 14:36

Hallo @Ryu,
dort auf der Seite steht doch schon, das Du für ein besseres Verständnis Dir einmal den Quelltext der Seite anschauen solltest. Aus dem Quelltext hättest Du Dir dann doch nur die entsprechenden Bestandteile heraus kopieren brauchen. Wink

Grundsätzlich ist es nicht anders aufgebaut wie ein Navigationsmenü, nur das die CSS-Animation anders herum abläuft. Zum besseren Verständnis trage einmal die beiden nachfolgenden Codes in Dein Forum ein.


1 Diesen Code bitte in Dein persönliches CSS eintragen.
Code:
.caption-style-2{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.caption-style-2 li{
    float: left;
    padding: 0px;
    position: relative;
    overflow: hidden;
}

.caption-style-2 li:hover .caption{
    opacity: 1;
    transform: translateY(-100px);
}

.caption-style-2 img{
    margin: 0px;
    padding: 0px;
    float: left;
    z-index: 4;
}

.caption-style-2 .caption{
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top:300px;
    transition:all 0.15s ease-in-out;
}

.caption-style-2 .blur{
    background-color: rgba(0,0,0,0.7);
    height: 300px;
    width: 400px;
    z-index: 5;
    position: absolute;
}

.caption-style-2 .caption-text h1{
    text-transform: uppercase;
    font-size: 18px;
}

.caption-style-2 .caption-text{
    z-index: 10;
    color: #fff;
    position: absolute;
    width: 400px;
    height: 300px;
    text-align: center;
    top:20px;
}
2 Diesen Code in eine Beschreibung des Forums eintragen.
Code:
<ul class="caption-style-2">
  
 <li>
  <img src="https://i11.servimg.com/u/f11/19/58/28/33/m10.jpg" alt="" />  
 <div class="caption">
  
 <div class="blur">
 
 </div>
  
 <div class="caption-text">
  
 <h1>
 Amazing Caption
 </h1>
  
 <p>
 Whatever It Is - Always Awesome
 </p>
  
 </div>
  
 </div>
  
 </li>
  
</ul>


Hilft Dir das weiter?
Um noch mehr dabei umzusetzen, müsstest Du Dich schon alleine kümmern. CSS-Animationen sind sehr komplex und wir haben leider nicht so viel Zeit um noch näher darauf einzugehen. Danke für Dein Verständnis.

LG inde
avatar
inde
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von Ryu Mo 10 Jul 2017 - 19:05

Hallo Inde,
Danke für deine Zeit.

Wenn ich alles rauskopiere und sie so einfüge, funktioniert sie wunderbar.
Wenn ich diese aber mit einem anderen Bild ersetze, funktioniert es nicht mehr.

Zudem ist "Moderator" rechts neben dem Bild und nicht da drunter.
http://fs5.directupload.net/images/170710/ykti7s3w.png

Nun gilt es für mich nur noch herauszufinden woran es liegt.
Ansonsten bin ich zufrieden und kann damit bestimmt irgendwas anfangen.
Nochmals Danke für die Hilfe.
Ryu
Ryu
Lehrling
Lehrling

Männlich Beiträge : 27
Anmeldedatum : 01.06.11
keine
phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von inde Mo 10 Jul 2017 - 19:14

Bitte
Ryu schrieb:Zudem ist "Moderator" rechts neben dem Bild und nicht da drunter.
Dann setze den gesamten Code nochmals in einen Container (div) oder in eine Tabelle ein. Dann sollte auch das behoben sein, vielleicht genügt auch nach dem Code ein Zeilenumbruch (<br>)
Auch würde eine zusätzliche Deklaration im CSS Abhilfe schaffen.
Code:
.caption-style-2 {
    display: inline-block;
}

Wenn das Thema erledigt ist, dann setze bitte noch das entsprechende Icon ein.

LG inde
avatar
inde
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von Ryu Di 11 Jul 2017 - 16:43

Hallo Inde,

ich habe es mal ausprobiert. Es funktionierte nur mit dem Code ohne den <br/> und dem <div>-Tag.

Ich habe auch schon rausgefunden wie ich die Größe der Schrift auch für kleinere Grafiken anwenden kann.

Damit wurde mir hier auch geholfen und bedanke mich für die Zeit und die Hilfe.
Vielen Dank!
Die Rest finde ich schon durch rumprobieren aus Smile
Ryu
Ryu
Lehrling
Lehrling

Männlich Beiträge : 27
Anmeldedatum : 01.06.11
keine
phpBB2

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von inde Di 11 Jul 2017 - 16:48

Bitte... und den Rest bekommst Du sicherlich auch alleine hin. top

LG inde & closed

Thema ist erledigt und wurde ins Archiv verschoben.
Regeln des Forums der Foren
avatar
inde
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten