Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind, loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Forenaustausch

Alle Anzeigen ansehen

Regeln und nützliche Hinweise
Lexi Help
Lexi Help
Schnelle
Hilfe
Klicke Hier
www.forumieren.de

[phpBB2] Caption Hover einfügen

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Caption Hover einfügen

Beitrag von Ryu am 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
avatar
Ryu
Neuling
Neuling

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

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von inde am 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
Administrator
Administrator

Männlich Beiträge : 5271
Hinweis : Flash The Scene™
Anmeldedatum : 20.10.11
keine
Firefox phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von Ryu am 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.
avatar
Ryu
Neuling
Neuling

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

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von inde am 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
Administrator
Administrator

Männlich Beiträge : 5271
Hinweis : Flash The Scene™
Anmeldedatum : 20.10.11
keine
Firefox phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von Ryu am 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
avatar
Ryu
Neuling
Neuling

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

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Caption Hover einfügen

Beitrag von inde am 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
Administrator
Administrator

Männlich Beiträge : 5271
Hinweis : Flash The Scene™
Anmeldedatum : 20.10.11
keine
Firefox phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


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