Hover over image effects

Question

I am developing web site , and currently have a problem , I need to write javascript code which will enable images once they are hovered to become larger than others and display additionally several lines of text regarding the product on the image. I have looked on this article https://css-tricks.com/a-really-nice-way-to-handle-popup-information/ but it is not solving exactly my problem. Can you please advise?

Answer 1

What you want is fancybox though it works on click, not on hover so you'll have to add a bit of code to make it work on hover as I have below

Note: while it is possible (as shown here) to make this work on hover, it is not recommended. Put a bunch of these on a page and it will get pretty annoying real quick!

Here is a simple example , or see the snippet below

 $(document).ready(function() { $("a#inline").fancybox({ 'hideOnContentClick': true }); // add the bit below to make it work on hover $(".hoverClick").hover(function(){ $(this).click(); }); }); 

 <link rel="stylesheet" href="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.js"></script> <script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.easing-1.3.pack.js"></script> <script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.mousewheel-3.0.4.pack.js"></script> <a id="inline" class="hoverClick" href="#data"><img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg"> </a> <div style="display:none"> <div id="data"> <img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg"><br> <h3>My Cool Title</h3> <p>Put your cool item descrtiption here</p> </div> </div>