kyan: Maske über Bild bewegen

Beitrag lesen

SELF-Forum

Maske über Bild bewegen

kyan
– Informationen zu den Bewertungsregeln

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!

Beitrag melden
–
Informationen zu den Bewertungsregeln