Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <img class="hoverdemo" width="245" height="180" src="images/donut.png" alt="Donut"> <div class="overlay" style="display: none;" > <h3>Dankin DONUT 1</h3> <ul> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> </ul> </div> <img class="hoverdemo" width="245" height="180" src="images/donut.png" alt="Donut"> <div class="overlay" style="display: none;" > <h3>Dankin DONUT 2</h3> <ul> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> </ul> </div> <img class="hoverdemo" width="245" height="180" src="images/donut.png" alt="Donut"> <div class="overlay" style="display: none;" > <h3>Dankin DONUT 3</h3> <ul> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> </ul> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="js/hovereffect.js"></script> <script> $(function() { $(".hoverdemo").hovereffect({ background_color: "#4B2525", font_color: "#fff", duration: 800, opacity: 0.9, slidePath: ['left', 'topLeft'], overlayWidth: "180px", overlayHeight: "180px" }); }); </script> </body> </html>
Dankin DONUT 1
List item 1
List item 1
List item 1
List item 1
Dankin DONUT 2
List item 1
List item 1
List item 1
List item 1
Dankin DONUT 3
List item 1
List item 1
List item 1
List item 1
