I would like to add a jQuery hover effect to a view of thumbnail images (the content type consists of an image field). The effect that I would like to add can be seen here:

Code: http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html Example: http://elegantthemes.com/preview/Evolution/

It consists of an overlay that appears when the user hovers on an image. I would like the overlay to have links to the image itself (so the user can comment) and to open a larger version of the image in a lightbox.

I just cannot find an easy tutorial to add this. Anyone with good suggestions? Or with some time to show me the steps to implementing such an effect?


2 Answers 2


I would do it with adding a custom theme to that view How to apply theme to a view drupal 7 to make the views output to match with your tutorials HTML structure and add .js files as recommended.

When it goes advanced you can try creating a views style plugin so that you can add this jQuery effect directly from your views page.


How to create a Views style plugin for Drupal?

How to properly implement hook_views_plugins?


Code per Views Display


  • Add custom CSS or JS code to each display.
  • Serve code either as inline or from file.

Use Cases

CPV is useful in cases where:

  • you want to allow views admins to theme a particular display without granting them access to theme files;
  • you want to apply CSS and JS code to a display across all themes;
  • you want to apply CSS and JS code to a display without modifying an existing theme or creating a sub-theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.