Portfolio Vorschaubild Wordpress

  • Hallo zusammen,


    schaut mal hier http://www.tillmann-verpackungen.com/pages/referenzen/

    Wenn man mit der Maus über die Bilder fährt, färbt sich der Hintergrund rot.


    Frage: wie schaffe ich es, dass der Hintergrund nicht rot wird sondern dass sich der Hintergrund komplett ändert und ein Bild aus dem Projekt anzeigt?

    Also z.B. bei dem 1. Projekt hätte ich gerne statt den roten Hintergrund die schwarze Schachtel angezeigt.


    Mit Html und CSS komm ich da nicht weiter, oder? :/



    PS: Sollte das im PHP Forum falsch sein, dann bitte verschieben

  • Aus der Style.css

    Code
    1. .portfolio-items .item .overlay{
    2. display: none;
    3. background: #94BA65;
    4. position: absolute;
    5. width: 100%;
    6. height: 100%;
    7. top: 0; left: 0;
    8. opacity: 0;
    9. }

    Aus dem Theme

    PHP
    1. <div class="overlay">
    2. <a class="view-link" href="<?php echo get_permalink(); ?>" rel="bookmark"><?php _e('Projekt anzeigen', THEME_FX); ?></a>
    3. </div>
  • Die Schachtel findest du im 1. Projekt. Hier noch der direkte Link

    http://www.tillmann-verpackung…ombinationen/#prettyPhoto


    Und wie mach ich das am besten?

    Bei PHP kenn ich mich nur minimal aus und bei JS fast gar nicht.


    Wenn das jetzt aber viel Aufwand bereitet da eine Lösung zu präsentieren dann bitte nicht machen, das soll nur eine Übergangslösung sein die in 1-2 Monaten ohnehin wieder ersetzt wird.

  • Mit PHP kenne ich mich nicht aus .

    Mit CSS brauchst du ja nur mittels hover das Bild zu tauschen . Zb so


    * Link entfernt , weil existiert nicht mehr *

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Ja perfekt genau so meint ich das danke dir basti :)


    und gibts noch ne möglichkeit wie ich das hoverbild erst verzögert anzeigen lassen kann, nach 0,5 sek bspw, dass man mit der Maus über das Portfolio fahren kann ohne dass die ganze Zeit die Bilder hin und her switchen?

    Habs schon mit transition/transition-delay versucht, funktioniert bei mir aber irgendwie nicht

  • transisition geht so

    * Link entfernt , weil existiert nicht mehr *

    Aber das ist nicht so wie du es wolltest oder doch.


    Oder mit Transition mit Zeit Verzögerung * Link entfernt , weil existiert nicht mehr *


    oder nur Zeit Verzögerung * Link entfernt , weil existiert nicht mehr *

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von basti1012 ()

  • Also ich muss sagen, dass das bei mir alles gleich aussieht und nirgends eine Verzögerung ist (liegt's vielleicht auch am Browser? Hab Firefox 52.5.3)

  • Probier noch mal. Das lag wohl an den Browser Präfix oder wie man das nennt.

    * Link entfernt , weil existiert nicht mehr *


    Falls es immer noch nicht geht, dann bin ich überfragt

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von basti1012 ()

  • Notfalls machen wir das so * Link entfernt , weil existiert nicht mehr * mit Transition

    * Link entfernt , weil existiert nicht mehr * Transition und Verzögerung

    hoffe das geht ansonsten schmeiße ich meinen Browser in Müll, weil hier geht es.

    Oder wir helfen mit Javascript nach

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von basti1012 ()

  • Nein dein voriges Beispiel hat nicht funktioniert.


    Dein jetziges Beispiel funktioniert. Jedoch nur aus dem Grund da du dem 1sten Bild nach dem Hovern eine opacity von 0 gibst und dem 2ten Bild eine opacity von 1. Diesen Effekt kann man animieren.

  • Vielen Dank für eure Hilfe :)


    Ich muss jetzt nur mal schauen wie ich das am besten umsetze, das Portfolio wird mittels PHP generiert und da kenn ich mich nicht so aus

    Ich versuch mal das Portfolio mit normalen html & css zu gestalten, wenns klappt kann das Thema auch schon geschlossen werden ansonsten müsste mir bitte noch jemand helfen das in php umzusetzen