Apply CSS and Javascript affect to images Updated

I am trying to add CSS and Javascript hover affect to some images in drupal 7 .. something like in this tutorial.

http://callmenick.com/2014/03/06/image-overlay-hover-effects-with-css3-t ...
Hover on some touch devices is sticky like iphone .. in this example it gives the user a (X) which close the sticky hover when it is touched

i have jQuery Update already installed ... and when i applied the code like in this tutorial in custom CSS and Javascript files .. its not working ... i really do not know what am i doing wrong or if i have to install another library to drupal or what am i missing to add to drupal ... even when i try to test it here http://codepen.io/anon/pen/onsyH ... still not working ..

any help will be appreciated
I have done a CSS only alternative for you.

http://jsfiddle.net/bk5h7/

EDIT: In answer to the JS not working in Drupal, you may need to wrap any document ready JS in behaviour tabs, and/or declare jQuery.

This will also help if you use it in a view that uses AJAX. Putting it in a behaviour instead of document ready, means the JS will load again even on every AJAX request.

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {

        // Put your jQuery Code Here

  }
};
})(jQuery);


EDIT 2: The demo uses jQuery 1.9.1, whereas Drupal 7 is shipped with 1.4.4. Maybe try using the jQuery Update module to update your version.

EDIT 3: What are you using to load the Modernizr.js script? That touch function you are talking about relies on device detection using Modernizr.js.

Copy the modernizr.js file to your themes JS folder, and in your themes template.php file, try adding...

drupal_add_js(drupal_get_path('theme', 'YOUR_THEME') . '/js/modernizr.js');