Documentation - Image Hover

This documentation will help you in the processing to include CSS Image Hover

1. Installation

1.1. Insert the style.css file in the head-tag of your html file.
    
        <!DOCTYPE html>
        <html>
            <head>
                
                <link rel="stylesheet" href="style.css" type="text/css" >
                
            </head>
            <body>
            </body>
        </html>
    
1.2. If Internet Explorer 7 / 8 is supported, include the ie7only.css & ie8only.css file in the head-tag of your html file.
    
        <!DOCTYPE html>
        <html>
            <head>
            
                <link rel="stylesheet" href="style.css" type="text/css" >
                <!--[if IE 7]><link href="ie7only.css" rel="stylesheet" type="text/css" /><![endif]-->
                <!--[if IE 8]><link href="ie8only.css" rel="stylesheet" type="text/css" /><![endif]-->
            
            </head>
            <body>
            </body>
        </html>
    
1.3. Insert the html code for Image Hover into the body-tag of your html file.
    
        <body>
            
            
            <div class="image-hover img-zoom-in">
                <img src="images/1.jpg">
            </div>
            
            
        </body>
    
1.3. So you can see the Image Hover on the live page.

2. Change the Image

2.1. You can insert an image according to your wish.
    
        <body>
            
            
            <div class="image-hover img-zoom-in">
                <img src="images/1.jpg">
            </div>
            
            
        </body>
    

3. Change the Effect

3.1. In order to change the effect, you must replace the classname.
    
        <body>
            
            
            <div class="image-hover img-zoom-in">
                <img src="images/1.jpg">
            </div>
            
            
        </body>
    
3.2. Look closely at the example files in the code composition, to choose an specific hover effect.