[phpBB2] Caption Hover einfügen

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

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.

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.

---

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;
}

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

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.

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

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

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

LG inde &

	Thema ist erledigt und wurde ins Archiv verschoben. Regeln des Forums der Foren