CSS Slide Rollover Animation

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>




Share this

Related Posts

Previous
Next Post »