One example of CSS swiping

Details
Written by: Stanko Milosev
Category: CSS3
Hits: 4069
Only for Chrome.

In my case I want to have image, and some text (in future that will be menu) which will swipe inside the image.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link type="text/css" rel="stylesheet" href="/index.css">
	</head>
	
	<body>
		<div id="images">
			<img id="myImage" src="/lopata.jpg"></img>
			<div id="myCssSwipe" class="myTranslateY">
				I will swipe
			</div>
		</div>
		
		<script type="text/javascript" src="/index.js"></script>
		
	</body>
	
</html>

JS:

document.getElementById("myImage").addEventListener("click", function() {
	if (document.getElementById("myCssSwipe").className !== "myTranslateY-clicked") {
		document.getElementById("myCssSwipe").className = "myTranslateY-clicked";
	} else {
		document.getElementById("myCssSwipe").className = "myTranslateY";
	}
})

CSS:

#images {
	position:relative;
	overflow: hidden;
	margin-top:100px
}

.myTranslateY {
	color: red;
	position:absolute;
    top:15%;

	-webkit-transition: all 5000ms ease;
	-webkit-transform: translateY(0px);
}

.myTranslateY-clicked {
	color: red;
	position:absolute;
    top:15%;

	-webkit-transform: translateY(-200px);
	-webkit-transition: all 5000ms ease;	
}
Here notice line:
margin-top:100px
which has no practical puropse, I just wanted to separate image from rest of HTML
Then notice:
overflow: hidden; Which I need for text to "disappear" when it comes to the end of the image.

Example (only in Chrome):

I will swipe