see demo and effects on version .5 of dc simple image hover jquery plugin
Opacity With Background Effect
Zoom In Effect
Zoom Out Effect
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 :
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