kyan: Maske über Bild bewegen

Hallo zusammen!

Ich probiere gerade immer noch ein bisschen mit Animation in CSS rum. Von Prinzip her hatte ich die Idee, eine Maske über ein feststehendes Bild zu bewegen. Und hatte das jetzt erst mal so probiert

body{
	overflow:hidden;}	
.Maske{
	position:absolute;
	z-index:100;
	border:solid thick red;
	width: 800px;
	height:500px;
	left:100px;
	overflow:hidden;
	transition: left 1.5s ease;
	}	
.Bild{
	position:fixed;
	z-index:90;
	border:solid thin #ccc;
	width: 1200px;
	height:700px;
	left:50px;
	}
input[type="checkbox"]#myCheckbox { 
	z-index: 100;
	cursor: pointer;
	display:inline-block;
	background-image:url(images/Linoleum-Farben.jpg);
	opacity: 0;
	}
input[type="checkbox"]:checked#myCheckbox ~ .Maske { 
	left:600px;
}
<body>
<input type="checkbox" id="myCheckbox" />
Hier ist mein Text mit dem Wort <label for="myCheckbox" style="cursor:pointer"><u>meinLink</u> </label> und meine Checkbox direkt dahinter.<br /><br />
<div class="Maske">
	<div class="Bild">
		<img src="images/Bild.jpg" height="800" width="1200">
	</div>
</div>
</body>

funktioniert leider nicht, weil .Bild position:fixed das overflow:hidden von .Maske ausgehebelt wird.

Jetzt habe ich was über die CSS-Eigenschaft mask gelesen, damit aber noch nicht rumprobiert, weil dabei stand, dass sie vom IE nicht unterstützt wird. Da ja leider immer noch viele den IE nutzen, macht es dann ja nicht so viel Sinn, damit jetzt für eine Website zu arbeiten.

Nun frage ich mich:

  • kann man mit meiner ersten Idee irgendwas erreichen?
  • kann man doch irgendwie mit mask arbeiten?
  • oder muss man sowas doch mit Javascript realisieren?

Danke euch schon jetzt für eure Antworten!

  1. Servus!

    Hallo zusammen!

    Ich probiere gerade immer noch ein bisschen mit Animation in CSS rum. Von Prinzip her hatte ich die Idee, eine Maske über ein feststehendes Bild zu bewegen. Und hatte das jetzt erst mal so probiert

    Jetzt habe ich was über die CSS-Eigenschaft mask gelesen, damit aber noch nicht rumprobiert, weil dabei stand, dass sie vom IE nicht unterstützt wird. Da ja leider immer noch viele den IE nutzen, macht es dann ja nicht so viel Sinn, damit jetzt für eine Website zu arbeiten.

    Du könntest deine Rastergrafik in SVG einbinden (mit dem image-Element) und dann mit dem mask-Element maskieren. Das geht ab IE9.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
  2. @@kyan

    weil dabei stand, dass sie vom IE nicht unterstützt wird. Da ja leider immer noch viele den IE nutzen, macht es dann ja nicht so viel Sinn, damit jetzt für eine Website zu arbeiten.

    „Es ist ein verbreiteter Irrglaube, dass progressive enhancement heißt, seine Zeit in alte Browser zu stecken […] Man kann seine Zeit damit verbringen, mit den neusten und großartigsten Browsertechnologien zu experimentieren; sicher in dem Wissen, dass selbst wenn diese noch nicht weitgehend unterstützt werden, man den Fallback ja bereits hat. […]
    Webseiten müssen nicht in jedem Browser gleich aussehen.
    —Jeremy Keith

    LLAP 🖖

    --
    “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl