Image Slider mit Css Hover effekt

    Ich mal wieder :-D

    ich habe ein Problem mit dem Header/Image-Slider ( ist derzeit quasi deaktiviert weil ich die slidingzeit nach oben geschraubt habe )
    auf meiner startseite: http://www.web91.s67.goserver.host/

    und zwar wenn man drüber hovert erscheint der kurztext dazu und DIE HEADLINE (h5) rutscht nach oben
    gezwungenermaßen durch den befehl:

    [FONT=Consolas][COLOR=#888888][COLOR=#222222].cap-bot:hover h5[/COLOR][/COLOR] {
    [/FONT]

    • [COLOR=#C80000]bottom[/COLOR]: 120px;


    [FONT=Consolas]}

    Ich möchte aber jedoch keine bestimmte pixelanzahl angeben, in diesem fall die 120px um die die Headline beim hovern nach oben rutscht,
    sondern angepasst an den Text der erscheint beim hovern, irgendwo ist der wurm drin und ich weiß nicht wie ich das hinkriege, hoffe mir kann jmd helfen
    gruß an helix :'D (Y)[/FONT]

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Ja ... hmm ... und was hast du bisher probiert?
    Was hast du überhaupt für einen slider in Verwendung?
    Wenn der dieses Feature nicht bietet, musst es selbst einprogrammieren, fürchte ich.

    Und das könnte komplex werden.
    Warum versuchst du nicht lieber, den Text immer auf zwei Zeilen zu halten?

    "Gewinnspiele, Gutscheinaktionen, Werbung, insbesondere kommerzielle, ist sowohl in Signaturen als auch Beiträgen ohne vorherige Genehmigung des Betreibers verboten. Bei Zuwiderhandlung behalten wir uns vor die Beiträge zu löschen und den entsprechenden User zu sperren." Auszug aus den WPDE.org Nutzungsbedingungen

    denke man muss da irgendwie anders mit position:relative arbeiten,
    ich möchte nicht auf 2 Zeilen arbeiten, da ich the_excerpt schon eine bestimmt anzahl an zeichen festgelegt habe un dann kann es sein das es auch mal
    3 zeilig werden kann. es ist ein schlichter css3 slider ohne java wie man sieht

    Das kann nicht automatisch nach oben rutschen wenn der Text unten kommt, die h5 ist mit position absolut positioniert. Die kannst Du nur noch mit Werten an den Platz positionieren wo Du sie haben möchtest.
    Das ist nicht eben mal mit zwei Zeilen behoben.

    das ist mir durchaus bewusst, weshalb ich geschrieben habe das man da wohl mit position: relative denke ich arbeiten muss, aber ich wäre auch für ne lösung dankbar oder zumindest einen lösungsansatz

    du kannst nur den Container vom demText der beim Hovern erscheint in der Höhe fixieren,
    dann kannst du die Position von einem anderen Element an dessen Höhe anpassen,

    außer du schreibst dir ein jQuery Script, dass die Höhe des hover Textes ausliest und dann die Position des anderen Elements bestimmt
    das ist die langsamste all dieser Lösungen

    Danke Monika dein Ansatz hat mich auf die Lösung gebracht, ich habe einfach die figcaption als auch die h5 in einen neuen div gepackt und hier position: relative auswählt, den neuen div hab ich dann absolute verpasst und diesen dem hover effekt gegeben so das sich jetzt der Text immer im gleichen Abstand an die headline bewegt

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden