Portfolio Vorschaubild Wordpress

ronsenbonsen · 17. Januar 2018

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

ronsenbonsen · 17. Januar 2018

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>

basti1012 · 17. Januar 2018

Was für nee schwarze Schachtel. Aber mit Javascript währe das auch möglich. So wie du es am liebsten hättest.

ronsenbonsen · 17. Januar 2018

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.

basti1012 · 17. Januar 2018

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 *

ronsenbonsen · 22. Januar 2018

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

basti1012 · 22. Januar 2018

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 *

ronsenbonsen · 23. Januar 2018

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)

basti1012 · 23. Januar 2018

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

Stef · 23. Januar 2018

Hey,

Schau mal hier: http://css3.bradshawenterprises.com/cfimg/

basti1012 : Background-Images kann man nicht animieren. Sie haben diese Eigenschaft nicht. Darum wird egal was du an deinen transitions änderst nichts funktionieren.

basti1012 · 23. Januar 2018

aber es funktioniert doch? Es wird langsam eingeblendet und ausgeblendet und auch verzögert? Oder habe ich ein super browser

basti1012 · 23. Januar 2018

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

Stef · 23. Januar 2018

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.

ronsenbonsen · 23. Januar 2018

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

Portfolio Vorschaubild Wordpress

Jetzt mitmachen!

Teilen

Tags