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
    .portfolio-items .item .overlay{
        display: none;
        background: #94BA65;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0; left: 0;
        opacity: 0;
    }

    Aus dem Theme

    PHP
    <div class="overlay">
    <a class="view-link" href="<?php echo get_permalink(); ?>" rel="bookmark"><?php _e('Projekt anzeigen', THEME_FX); ?></a>
    </div>
  • 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 *

  • 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

  • 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

Jetzt mitmachen!

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