Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create flip effect horizontally and vertically to show images and text?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 615
    Comment on it

     

    Hello Readers , here is a simple blog on flipping effect horizontally and vertically using jquery flip() method  on mouse hover. On mouse hover image  will flip and we will see some text in a div having background color.  For this make a html file, a css file and a jquery file.

     

    Step 1: Make a file named  index.html and copy the below written code in that file.

    <!doctype html>
    
    <head>
    <link type="text/stylesheet" href="style.css" rel="stylesheet" >
    </head>
    
    <body>
    
    <h2>Horizontal Flip</h2>
    
    <div class="flip-horizontal">
        <div class="front">
            <img src="1.jpeg" alt="" />
        </div>
        <div class="back">
            <h3>Backside!</h3>
        </div>
    </div>
    
    
    <h2>Vertical Flip</h2>
    
    <div class="flip-vertical">
        <div class="front">
            <img src="1.jpeg" alt="" />
        </div>
        <div class="back">
            <h3> Backside!</h3>
        </div>
    </div>
    
    
    
    </body>
    </html>

     

    Step 2:  Now make a CSS file named style.css and copy the below code in that file.

    .flip-horizontal {
        height: 170px;
        width: 300px;
        margin: 10px auto;
       
    }
    .flip-horizontal img {
        width: 300px;
        height: auto;
    }
    .flip-horizontal .back {
        background: #cc0000;
        color: #fff;
        text-align: center;
    }
    
    .flip-vertical{
        height: 170px;
        width: 300px;
        margin: 0 auto;
       
    }
    .flip-vertical img {
        width: 300px;
        height: auto;
    }
    .flip-vertical .back{
        background: #cc0000;
        color: #fff;
        text-align: center;
    }
    
    h2 {text-align:center;}
    

     

    Step 3: Now write the below written jquery function in your html file before body tag closed.

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="jquery.flip.min.js"></script>
    
    <script>
    $(function(){
        $(".flip-horizontal").flip({
            trigger: 'hover'
        });
    });
    </script>
    
    <script>
    $(function(){
        $(".flip-vertical").flip({
            trigger: 'hover',
            axis: 'x'
        });
    });
    </script>


    Comment: Here I have used jquery flip function to flip image .By defaut  this method flip your image horizontally, therefore flip-horizontally div will flip horizontally on mouse hover. To make your div flip vertically , I gave argument axis: x, and image will flip vertically on mouse hover.    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: