Intoduction :-
Hii Friends...
Today I explain how to create a Image wipe effect with CSS3. CSS transition and animations provide a way for web developers to describe various kind of animation of CSS properties. you can use this code in your project copy this code and paste it.
Demo :-
Example :-
<!DOCtYPE htMl>
<html>
<head>
<meta charset="utf-8">
<title>C# jadu Image Wipe</title>
<style>
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
#rollover {
width: 330px;
height: 310px;
position: relative;
border: 8px solid #eee;
margin-left: 50px;
margin-top: 50px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#rollover div {
position: absolute;
top: 0;
left: 0;
}
#rollover div:nth-child(2) {
-webkit-transition: -webkit-mask-position 1s ease;
-webkit-mask-size: 600px 600px;
-webkit-mask-image: -webkit-gradient(linear, left top, right top,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.35, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.75, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}
#rollover div:nth-child(2):hover {
-webkit-mask-position: -300px -300px;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="rollover">
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlEf-315eBzFgzsw8kpIJrhT69UIYJKtR4HsA8zGKQq6G2_xAuBz2g9Sw-EngxVeB3vySoZA-2LWFbksqNPSLML7HikbiV5U9iWseFBL6VIah4MykOz_WzBIMqfOKHUgsPwSCX6mSDhHg/w140-h87-p/AsPDOtNEt.jpg" alt="Smile"></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvWNItObgKhKiv-ahgCUQE7vpfahTmyZrnJcmyBvXsKw_1oLQScNMvNUn-L94sfE-ubpgj5Sm8k4Xw69L6AQcQI_0gYQNe6K83wVgGezxg02315r0ryZW-HPKJ-ZCa08UVnmZ_S95h8A/w140-h140-p/AspDotNet.jpg" alt="Sleep"></div>
</div>
</div>
</body>
</html>
Hii Friends...
Today I explain how to create a Image wipe effect with CSS3. CSS transition and animations provide a way for web developers to describe various kind of animation of CSS properties. you can use this code in your project copy this code and paste it.
Demo :-
Example :-
<!DOCtYPE htMl>
<html>
<head>
<meta charset="utf-8">
<title>C# jadu Image Wipe</title>
<style>
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
#rollover {
width: 330px;
height: 310px;
position: relative;
border: 8px solid #eee;
margin-left: 50px;
margin-top: 50px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#rollover div {
position: absolute;
top: 0;
left: 0;
}
#rollover div:nth-child(2) {
-webkit-transition: -webkit-mask-position 1s ease;
-webkit-mask-size: 600px 600px;
-webkit-mask-image: -webkit-gradient(linear, left top, right top,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.35, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.75, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}
#rollover div:nth-child(2):hover {
-webkit-mask-position: -300px -300px;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="rollover">
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlEf-315eBzFgzsw8kpIJrhT69UIYJKtR4HsA8zGKQq6G2_xAuBz2g9Sw-EngxVeB3vySoZA-2LWFbksqNPSLML7HikbiV5U9iWseFBL6VIah4MykOz_WzBIMqfOKHUgsPwSCX6mSDhHg/w140-h87-p/AsPDOtNEt.jpg" alt="Smile"></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTvWNItObgKhKiv-ahgCUQE7vpfahTmyZrnJcmyBvXsKw_1oLQScNMvNUn-L94sfE-ubpgj5Sm8k4Xw69L6AQcQI_0gYQNe6K83wVgGezxg02315r0ryZW-HPKJ-ZCa08UVnmZ_S95h8A/w140-h140-p/AspDotNet.jpg" alt="Sleep"></div>
</div>
</div>
</body>
</html>
