Hi Friends...
In this article we learn 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.
C# jadu Image Wipe
In this article we learn 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 :
Your Code is as under
<!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/AVvXsEiK7s8u_-x9YxvDCbFYDmafrKWLtODwK86C3LncDREP6q4RH2214oazFpH33V602ftM74TnWABF5fT-VLMo6jxNmUjSrTuuN4K5I2gHjzVRvDSX9lS2ipayUe5nKm_y9_uASW6HU_TqIi8B/s1600-r/finalc%2523logoPNGupdated.png" alt="Smile"></div>
<div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5CYXF1Vf7qbftg_Rh5O5oT6PK34tYN6XvBk5DuLiGQAJ7uO2FrYY9XmwqmB1Ac5QTyn3Iv6LiqbIeQ0QQeO-5uZMF3r5BzSABZ0g7DQ-47l__PRR7Bm0o-nB5fcCBxsOerlrT90JW4z_/s320/3D+Cube_C%2523+jadu.jpg" alt="Sleep"></div>
</div>
</div>
</body>
</html>
Hi to every one, the contents present at this site are
ReplyDeleteactually remarkable for people experience, well, keep up the good work fellows.
school prospectus design uk | School Prospectus UK
Thanks Jessica
Deleteawesome environment and can do more things from yours. really great to gain more interesting content from yours. thanks keep share more good things.
ReplyDeleteGMAT classes chennai
Thanks Thamizharasi
Deletehttp://dotnetmodules.blogspot.in/2016/01/css-3d-cube.html
ReplyDeleteFor More Examples go here...