Follow along with the video below to see how to install our site as a web app on your home screen.
Бележка: This feature may not be available in some browsers.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div#splitter { position: relative; overflow: hidden; width: 500px;
background: #0057a7; font-family: Blue Highway, Arial, sans-serif;
color: #fff; margin: 0 auto; font-size: 0; }
div#splitter img { position: absolute;
transition: 1s all ease-in-out; width: 100%;
-webkit-transition: 1s all ease-in-out; width: 100%;
}
div#splitter span { position: absolute; font-size: 8rem;
top: 150px; left: 100px; }
div#splitter img:nth-of-type(1) { clip: rect(0px,500px,250px,0px); }
div#splitter img:nth-of-type(2) { clip: rect(250px,500px,500px,0px); }
div#splitter:hover img:nth-of-type(1) { transform: translateY(-150px);
-webkit-transform: translateY(-150px);
}
div#splitter:hover img:nth-of-type(2) { transform: translateY(150px);
-webkit-transform: translateY(150px);
}
</style>
</head>
<body>
<div id=splitter>
<span>Flower</span>
<img src=road-to-nowhere.jpg alt="">
<img src=road-to-nowhere.jpg alt="">
<img src=road-to-nowhere.jpg alt="Photograph of highway to Uluru, Australia"
style=position:static;opacity:0>
</div>
</body>
</html>