How To Create Slide Rollover Animation Using CSS3
In This CSS Tutorial we will see How To Make Image Rollover Slide Using HTML And CSS3 In Netbeans Editor .
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Css Image Overflow</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main{
height: 50px;width: 100px;overflow: hidden;
}
.main img{margin-top: -50px;transition: all .5s ease-in-out}
.main img:hover{margin-top: 0}
.main2{margin-top: 10px;
height: 100px;width: 50px;overflow: hidden;
}
.main2 img{margin-left: 0;transition: all .5s ease-in-out}
.main2 img:hover{margin-left: -50px;}
</style>
</head>
<body>
<div class="main">
<!-- the image size is 100px X 100px -->
<img src="../images/imgy.png" alt=""/>
</div>
<div class="main2">
<!-- the image size is 100px X 100px -->
<img src="../images/imgx.png" alt=""/>
</div>
</body>
</html>