2017-02-28 7 views
-2

Ich frage mich, ob this möglich ist oder nicht. Ich lerne JS und CSS und suchte auf Google und StackOverflow, aber keine Antwort. Der eine der S von ALYSSA wird von der Hand des Modells abgedeckt. Wenn du es nicht erklären willst, sag mir einfach den Namen des Effekts.CSS/JS Bild Text Overlay wie Gitter

+2

Ich würde vermuten, das ist nur ein Bild in Photoshop erstellt. – Brad

+0

Mit der Eigenschaft 'z-index' und' absolute' können Sie Elemente übereinander legen. Aber wie bereits erwähnt, ist es wahrscheinlich nur in Photoshop getan – zik

+0

@Brad ich weiß, aber kann dies mit CSS und JS erreicht werden und immer noch reagiert? – ZeuS

Antwort

-4

Ich denke, dass es von PhotoShop oder einer anderen Bildbearbeitungs-App getan wird. https://assets.awwwards.com/awards/external/2017/02/58ad59d717a01.jpg es ist nur ein Bild. keine Codierung.

können Sie jedoch Z-Index verwenden. setzen ALYS in verschiedenen Element, SA MI in verschiedenen Element und LLER in verschiedenen Element.

Dann in CSS den Z-Index dieser Elemente entsprechend anordnen.

Die Eigenschaft z-index gibt die Stapelreihenfolge eines Elements an.

IMP: Ein Element mit größerer Stapelreihenfolge befindet sich immer vor einem Element mit einer niedrigeren Stapelreihenfolge.

Hinweis: Der z-Index funktioniert nur bei positionierten Elementen (Position: absolut, Position: relativ oder Position: fest).

+0

seine Frage handelt von einem Hover-Effekt und nicht von einem Bild – MKAD

1

Obwohl dieses Bild in Photoshop erstellt wird, können Sie dies reproduzieren, indem Sie das CSS-Attribut mask verwenden, um den Arm über den Text zu setzen. Sie würden am Ende 3 Schichten haben: das Hauptbild im Hintergrund, die Textebene und dann wieder das Hauptbild, aber mit einer Maske. Das Maskenbild würde in einem Grafikprogramm erstellt werden und wäre größtenteils schwarz, mit Ausnahme des Armstücks, das weiß wäre.