see demo and effects on version .5 of dc simple image hover jquery plugin

 

 

Quick start

 

1.- Include the files

 

 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="/js/j_dc_image_hover.js" type="text/javascript"></script>
  <link href="/css/j_dc_image_hover.css" rel="stylesheet" type="text/css" />
    
  <link href='https://fonts.googleapis.com/css?family=Averia+Sans+Libre' rel='stylesheet' type='text/css'>

  you can download it from below link :

 

dc simple image hover jquery plugin download

 

 2.- Create HTML Element

you should use similar Html code code :

 

<div class="j_dc_image_hover" id="jdc_image_h_effect1">
     <h2 class="j_dc_image_hover_h2" >Opacity With Background Effect</h2>
	 
    <div class="dc_img_column">
	
        <div class="j_dc_image_hover_image_div"><img src="/images/baby1.jpg" alt="baby1" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div>
         <div class="j_dc_image_hover_image_div"><img src="/images/baby2.jpg" alt="baby2" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div>
         <div class="j_dc_image_hover_image_div"><img src="/images/baby3.jpg" alt="baby3" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect</a></div>
         
    </div>
    
      <div class="dc_img_column">
	  
        <div class="j_dc_image_hover_image_div"><img src="/images/baby4.jpg" alt="baby1" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div>
         <div class="j_dc_image_hover_image_div"><img src="/images/baby5.jpg" alt="baby2" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div>
         <div class="j_dc_image_hover_image_div"><img src="/images/baby6.jpg" alt="baby3" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect</a></div>
        
    </div>
    
</div>

 

 

3.- Call the the plugin on a container as your wish

 

<script type="text/javascript">
    
    $(document).ready(function(){
  
         $("#jdc_image_h_effect1").j_dc_image_hover_func("opacity");
    
    });
    
</script>

 

on version 0.5 you can use this affects :

opacity
zoom_in
zoom_out