• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Element nur innerhalb von Boxen (div) sichtbar machen (mit CSS)

G

Gelöschtes Mitglied 36920

Guest
Hallo,
Folgendes Problem kann ich nicht alleine lösen und bitte euch deshalb um eure Hilfe:
Ich möchte in einem <div> Element ein anderes Element (z.B. Bild) anordnen, das aber nur innerhalb dieser Box sichtbar sein soll.
Wenn es jetzt also bei einer Animation verschoben wird soll es sich erst in der Box bewegen, sobald es deren Rand erreicht aber diese verlassen und dabei erst nur noch mit dem Teil, der sich noch innerhalb der Box bzw. der Ränder der Box befindet und dann garnicht mehr sichtbar sein.
In anderen Worten:
Ich möchte z.B. ein Bild verschieben und dabei soll es sich aus einer Box hinaus bewegen (zumind. grafisch) und dann eben nicht mehr sichtbar sein. Also seitlich hinaus schweben, als wäre die Box ein Fenster (eins aus Glas, also die, die man in Häusern verbaut) und wenn jmd. ein Bild davor hält, sind man es, wenn er es dann aber zur Seite bewegt, verlässt es aber den sichtbereich.
Ich hoffe man versteht jetzt was ich meine.
Ich weiß aber nicht, wie ich die Sichtbarkeit des Elements dahingehend beeinflussen kann.
Es wäre super, wenn das ohne Maskierung, mit CSS gelöst werden könnte.
Ich bedanke mich schon mal für eure Antworten!
 
Werbung:
Okay wenn ich es richtig verstanden habe, dann mache ich mal eben etwas fertig und packe es als Edit hier rein, also ab und zu mal die Seite aktualisieren.

Edit:
https://jsfiddle.net/yojdhbb6/2/
Ich habe hier nun die Variante angewendet, den background zu verschieben. Aus deinem <img> wird dann also das background-image eines divs
 
Zuletzt bearbeitet:
Danke für die schnellen Antworten. Aaaron3219, auf deine Idee wäre ich so schnell nicht gekommen.
Danke, dass du dir auch noch die Mühe gemacht hast das praktisch als Beispiel anzuwenden.
Dennoch werde ich Sempervivums Vorschlag verwenden, da dies auch mit mehreren Bildern funktioniert, leichter mit Javascript beeinflust werden kann und allgeimein praktischer ist.
 
Werbung:
Das ist auch völlig in Ordnung. Was ich jedoch noch klarstellen wollte ist, dass meine Variante ebenfalls mit mehreren Bildern Funktioniert hätte und das sogar mit weniger html-Code. Es ist nämlich in der Tat möglich, mehrere Hintergrundbilder in einem div zu haben und diese auch zu verschieben. Wenn du also irgendwas im Vordergrund (über den Bildern) haben willst, finde ich meine Variante durchaus gelungen.

Wenn man über JEDEM image etwas haben will (Schrift oder so) ist eine kleine Abwandlung meiner Variante ebenfalls Sinnvoll:
Im Mutterdiv werden die divs per Flexbox ausgerichtet. Jedes von Ihnen bekommt ein Hingergrundbild und fertig. Jetzt kann man beruhigt über jedes div noch Text oder sowas einfügen.

So, nach dem "Verteidigen" meiner Arbeit jetzt hier noch die Info zu mehreren Hintergründen.

Mehrere Hintergrundbilder (Info):
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden
 
Zurück
Oben